Cuadrícula de jQuery Mobile

rejilla de diseño jQuery Mobile

jQuery Mobile ofrece una solución de diseño de columnas basada en CSS. Sin embargo, generalmente no se recomienda usar el diseño de columnas en dispositivos móviles, debido a las limitaciones de ancho de pantalla de estos dispositivos.

Pero a veces necesita posicionar elementos más pequeños, como botones o barras de navegación, al estilo de una tabla y alineados en paralelo. En estos casos, el diseño de columnas es muy adecuado.

Las columnas de la cuadrícula son de ancho igual (el ancho total es 100%)，sin borde, fondo, margen exterior o margen interior.

Hay cuatro tipos de cuadrículas de diseño disponibles：

Clase de cuadrícula Columna Ancho de columna Corresponde Ejemplo
ui-grid-a 2 50% / 50% ui-block-a|b Prueba
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c Prueba
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d Prueba
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e Prueba

Consejo：En el contenedor de columnas, según el número de columnas diferentes, los elementos hijos pueden establecer la clase ui-block-a|b|c|d|e. Estas columnas se alinearán flotando una al lado de la otra.

Ejemplo 1: Para la clase ui-grid-a (diseño de dos columnas), debe especificar dos elementos hijos ui-block-a y ui-block-b。

Ejemplo 2: Para la clase ui-grid-b (diseño de tres columnas), debe agregar tres elementos hijos ui-block-a、ui-block-b y ui-block-c。

Personalización de la cuadrícula

Puede personalizar los bloques de columnas utilizando CSS：

Ejemplo

<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>

Prueba personalmente

También puede personalizar los bloques utilizando estilos en línea：

<div class="ui-block-a" style="border: 1px solid black;"><span>Texto..</span></div>

Filas múltiples

También es posible que en una columna se incluyan múltiples filas。

Notas：ui-block-a-class siempre creará una nueva línea：

Ejemplo

<div class="ui-grid-b">
  <div class="ui-block-a"><span>Alguno de texto</span></div>
  <div class="ui-block-b"><span>Alguno de texto</span></div>
  <div class="ui-block-c"><span>Alguno de texto</span></div>
  <div class="ui-block-a"><span>Alguno de texto</span></div>
  <div class="ui-block-b"><span>Alguno de texto</span></div>
  <div class="ui-block-a"><span>Alguno de texto</span></div>
</div>

Prueba personalmente