jQuery Mobile cuadrícula
jQuery Mobile disposición de la red
jQuery Mobile proporciona un desglose de un diseño basado en CSS. Sin embargo, en los dispositivos móviles, considerando ancho de la pantalla del teléfono estrecha, por lo general no se recomienda el uso de diseño de columna desagregada.
Pero a veces desea que los elementos más pequeños (como botones o pestañas de navegación) están dispuestos uno al lado del conjunto, al igual que en una mesa. En este caso, se recomienda utilizar el diseño sub-columna.
columnas de la cuadrícula tienen la misma anchura (en total 100%), sin borde, fondo, margen o material de relleno.
Hay cuatro cuadrícula de diseño están disponibles:
| la clase de cuadrícula | fila | Ancho de columna | correspondencia | Ejemplos |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-bloque-a | probar |
| ui-grid-A | 2 | 50% / 50% | ui-bloque-a | b | probar |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-bloque-a | b | c | probar |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-bloque-a | b | c | d | probar |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-bloque-a | b | c | d | e | probar |
 | En los contenedores de columna, sub-elementos tienen clase como ui-bloque-a | b | c | d | e en función del número de columnas. Flotante fila lado a lado. Ejemplos 1: clase de interfaz de usuario de la red-a (dos diseños), debe especificar la interfaz de usuario-bloque-a y ui-bloque-b de los dos sub-elementos. Ejemplos 2: clase de interfaz de usuario de la red-b (tres diseños), debe agregar ui-bloque-a, ui- bloque-b y ui-bloque-c de los tres sub-elementos. |
|---|
cuadrícula personalizada
Mediante el uso de CSS, puede personalizar los bloques de columnas:
Ejemplos
.ui-bloque-a, .ui-bloque-b, .ui-bloque-c {
background-color: gris claro;
frontera: 1px solid negro;
altura: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</ Style>
Trate »
También puede personalizar usando los bloques de estilo en línea:
<div class="ui-block-a" style="border: 1px solid black;"><span>Text..</span></div>
Multilínea
En la columna, también puede tener múltiples líneas.
Nota: una clase-ui-bloque siempre crean una nueva línea:
Ejemplos
<Div class = "ui-bloque-a"> <span> texto </ span> </ div>
<Div class = "ui-bloque-b"> <span> texto </ span> </ div>
<Div class = "ui-bloque-c"> <span> texto </ span> </ div>
<Div class = "ui-bloque-a"> <span> texto </ span> </ div>
<Div class = "ui-bloque-b"> <span> texto </ span> </ div>
<Div class = "ui-bloque-a"> <span> texto </ span> </ div>
</ Div>
Trate »
Rejilla sensible
En la pequeña pantalla, en exceso no es recomendable en un lado de la fila por botón lateral (texto acortado).
Creamos una rejilla sensible para su uso en contenedores categorías ui-sensible: