Manual de jQuery

Maquetación de contenido con grids en jQuery Mobile

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

Los grid son una de las estructuras más utilizadas para presentar información tabular, en este artículo explicamos como hacer uso de ellos con jQuery Mobile.

Los grids son una de las pocas características de jQuery Mobile que no hacen uso de algún atributo de datos particular. En lugar de ello, simplemente se establecen cuadrículas especificando ciertas clases CSS para el contenido del sitio.

Estos grids vienen en cuatro diferentes tipos de presentaciones, rejillas de dos, tres, cuatro y cinco columnas. Es muy probable que la presentación de cinco columnas sea la menos utilizada, ya que quizás es la menos adecuada para presentar información en un teléfono móvil, sin embargo se puede hacer uso de ella si la información se presenta en una tableta.

Para comenzar el trazado de un grid, lo primero que debemos hacer es utilizar un bloque div que contenga la clase “ui-grid-X”, donde “X” representa algún valor entre a, b, c o d. Si utilizaramos la clase “ui-grid-a”, esta representará un grid de dos columnas, b por su parte es una rejilla de tres columnas, c de cuatro y d de cinco.

Si por ejemplo, quisiéramos empezar una cuadrícula de dos columnas, la cual envuelva algún tipo de contenido que presentamos en una página, haríamos lo siguiente:

<div class="ui-grid-a">
Contenido
</div>

Una vez que tienes la estructura base, dentro del div que define el grid agregarás un div para cada celda contenedora. Dichos divs deberán tener la clase “ui-block-X”, donde X una vez más representará un valor entre a y e. La clase “ui-block-a” se usará para definir la primera celda, “ui-block-b” para la segunda y así sucesivamente hasta llegar a “ui-block-e” que definirá la quinta celda de la fila. Este tipo de funcionamiento es similar al trabajo con tablas en HTML.

En base a esto, podemos definir el siguiente fragmento de código para mostrar un sencillo grid de dos columnas con dos celdas de contenido:

<div class="ui-grid-a">
<div class="ui-block-a">Columna Izquierda</div>
<div class="ui-block-b">Columna Derecha</div>
</div>

El texto dentro de una celda se ajustará automáticamente al tamaño estándar de las columnas, sin importar que tan grande sea la cantidad que añadimos. Mientras más pequeña sea la pantalla y mayor la cantidad de texto, es recomendado utilizar un menor número de columnas, de esa manera no afectaremos la experiencia del usuario.

Para poder trabajar con otros tipos de grid es simplemente necesario cambiar las clases que utilicemos para definir los divs. Por ejemplo, una cuadrícula de tres columnas se establecería con el siguiente fragmento de código:

<div class="ui-grid-c">
<div class="ui-block-a">Primera celda</div>
<div class="ui-block-b">Segunda celda</div>
<div class="ui-block-c">Tercera celda</div>
</div>

En caso de que quisieramos un grid con una sóla columna, la clase a utilizar es “ui-grid-solo”. Una vez definido esto, podemos hacer uso de la clase “ui-block-a” para definir la celda. Una de las pocas razones que existen para utilizar un grid de una sola columna, es mantener los mismos márgenes que el resto del contenido utilizado dentro de otras cuadrículas.

Para crear varias filas dentro de una misma cuadrícula, sólo tiene que repetir bloques. El siguiente fragmento de código muestra un ejemplo sencillo de una cuadrícula con dos filas de celdas:

<div class="ui-grid-a">
<div class="ui-block-a">Superior Izquierda</div>
<div class="ui-block-b">Superior Derecha</div>
<div class="ui-block-a">Inferior Izquierda</div>
<div class="ui-block-b">Inferior Derecha</div>
</div>

En base al anterior código, podemos observar que no se maneja un concepto específico de fila. jQuery Mobile se encarga de interpretar el código, y definir que debe crear una nueva fila cuando el bloque comienza de nuevo con la clase ui-block-a.

Deja una respuesta