Hacer columnas y grillas con jQuery Mobile

31 de mayo de 2012

Creación de documentos web con grillas o contenidos dispuestos en columnas mediante jQuery Mobile.

Todas las aplicaciones de jQuery Mobile están diseñadas para trabajar en resoluciones de pantallas variadas. Por esta razón, cuando creamos una lista, esta ocupa toda la pantalla, a menos que nosotros la cambiemos. Sin embargo, en algunos momentos, tal vez deseemos dividir los contenidos en columnas.

Como bien sabemos, con CSS podemos implementar esa división en columnas, pero como la labor de jQuery Mobile es ahorrarnos trabajo, las diseñaremos de una manera más sencilla gracias a él. Así que, si lo que tenemos pensado es hacer una aplicación web para dispositivos móviles en donde su contenido esté dividido en columnas, jQuery Mobile te ayudará de manera muy eficiente.

En este artículo del Manual de jQuery Mobile exploraremos la creación de columnas, mediante la grilla que nos ofrece el framework para maquetar contenidos.

Creación de columnas en una aplicación jQuery Mobile

Imagina que un día tienes la necesidad de hacer unas columnas en tu aplicación web móvil, como en los periódicos. Si deseas recurrir a la ayuda que te brinda jQuery Mobile, podrás dividir esos contenidos en dos, tres y hasta ¡cinco columnas! Obviamente, en algunos tipos de aplicaciones y dispositivos, la usabilidad no saldrá beneficiada al utilizar hasta 5 columnas, pero al menos lo permite el framework.

Otro aspecto interesante es que no tienes que dividir en columnas toda la página web, sino simplemente algunas secciones de ella. Pero dejémonos de hablar y veamos ya mismo el código para crear dos columnas en nuestra página web móvil.

<div class="ui-grid-a">
<div class="ui-block-a"><strong>Esta es la columna numero 1</strong> El texto que se ecriba aquí se amoldará a la mitad de pagina.</div>
<div class="ui-block-b"><strong>Esta es la columna numero 2</strong> El texto que se ecriba aquí se amoldará a la otra mitad de pagina.</div>
</div>

Lo primero que hacemos es crear un elemento DIV, que tendrá como clase CSS, "ui-grid-a". Con tal clase le indicamos al framework que justo allí inicia nuestra grilla, que en este caso es de dos columnas. Como dije anteriormente no solo pueden tener dos columnas, pues podremos crear grilla que tengan hasta cinco. Para especificar las columnas que deseamos implementar están las siguientes clases.

Para grillas con dos columnas le asignamos la clase: ui-grid-a.
Para grillas con tres columnas le asignamos la clase: ui-grid-b.
Para grillas con cuatro columnas le asignamos la clase: ui-grid-c.
Para grillas con cinco columnas le asignamos la clase: ui-grid-d.

Una vez establecida la grilla, debemos proceder con la creación de los bloques, uno por columna. En el código anterior son dos bloques, cuya creación se logra también con la asignación de clases CSS. Como se habrá podido observar, asignamos al primer elemento DIV la clase "ui-block-a", mientras el segundo tiene "ui-block-b". Al igual que con las grillas, lo bloques van aumentando de acuerdo con el número que hayamos establecido en la grilla. Solo debemos cambiar la última letra.

Para crear el primer bloque usamos la clase ui-bloc-a.
Para crear el segundo bloque usamos la clase ui-bloc-b.
Para crear el tercer bloque usamos la clase ui-bloc-c.
Para crear el cuarto bloque usamos la clase ui-bloc-d.
Para crear el quinto bloque usamos la clase ui-bloc-e.

Cada uno de los bloques, tiene el mismo ancho, algo parecido a lo que pasa con las barras de navegación explicadas en un artículo anterior del manual de jQuery Mobile. Así que si tenemos cinco columnas, cada uno de los bloques, tendrá el 20% de ancho del documento web o elemento contenedor de la grilla.

Hacer Grillas con temas

Hasta este punto del manual de jQuery Mobile, ya debes saber que para agregar temas, a cualquier widget del framework, debemos agregar el atributo data-theme. Sin embargo, esto no es así con las grillas, básicamente porque éstas no son widgets.

Debemos hacer un código como el siguiente, que se debe escribir incluso antes de crear los bloques.

<div class="ui-grid-a">
<div class="ui-bar ui-bar-e>
Con ello logramos que todos los bloques de nuestra grilla tengan colores uniformes. Sin embargo ¿Qué pasa en el momento en que deseemos tener bloques con colores diferentes? pues bien, en este caso debemos hacer lo mismo, un nuevo elemento DIV, con las clases, ui-bar, para indicar que es una barra, y ui-bar-b, la cual asigna color al bloque o la grilla.
En este caso el código que obtendremos será el siguiente:
<div class="ui-grid-a">
    <div class="ui-block-a" >
    <div class="ui-bar ui-bar-e">
    <strong>Esta es la columna numero 1</strong>Con color amarillo    </div>
    </div>
    <div class="ui-block-b">
    <div class="ui-bar ui-bar-b">
    <strong>Esta es la columna numero 2</strong> Con color azul     </div>
    </div>
</div>

Ahora obtenemos dos columnas, la primera tiene un color amarillo, asignado por el tema "e", mientras que la segunda tiene es azul, al tener asignado el tema "e".

Nota: Las clases para darle color a las columnas y grillas, también se pueden poner en elemento div, que tienen las clases "ui-drid-a" o "ui-bloc-a", pero la documentación de jQuery Mobile no lo recomienda.

Crear múltiples Filas

Con lo que hemos hecho hasta ahora solo hemos creado columnas. Para que estas columnas se conviertan en grillas, debemos tener más de una fila, de lo contrario solo tendremos columnas. Para crear el aspecto de una grilla hacemos el siguiente código:

<div class="ui-grid-a">
    <div class="ui-block-a" >
    <div class="ui-bar ui-bar-e">
    <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodará a la mitad de pagina.
    </div>
    </div>
    <div class="ui-block-b">
    <div class="ui-bar ui-bar-a">
    <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodará a la otra mitad de pagina.
    </div>
    </div>
        <div class="ui-block-a" >
    <div class="ui-bar ui-bar-c">
    <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodará a la mitad de pagina.
    </div>
    </div>

        <div class="ui-block-b">
    <div class="ui-bar ui-bar-b">
    <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodará a la otra mitad de pagina.
    </div>
    </div>
</div>

Sólo debemos crear dos bloques mas, después de los iníciales, es decir, que si nuestra grilla es de tres columnas, debemos crear seis bloques para obtener dos filas.

Para mayor claridad dejo un código de ejemplo con todo lo visto en el presente artículo.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <title>Culumnas con JQM</title>
    <link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
    <script src="jquery-1.7.1.min.js"></script>
    <script src="jquery.mobile-1.0.min.js"></script>

</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header" data-position="fixed">
    <h1>Columnas</h1>
</div>
<div data-role="content" >
    <span class="ui-btn-active">Dos columnas simples</span>
    <div class="ui-grid-a">
    <div class="ui-block-a" >
    <div class="ui-bar ui-bar-e">
       <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodará a la mitad de pagina.
    </div>
    </div>
    <div class="ui-block-b">
    <div class="ui-bar ui-bar-b">
       <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodará a la otra mitad de pagina.
    </div>
    </div>
    </div>
    <br>
    <span class="ui-btn-active">Dos columnas simples con dos filas</span>

    <div class="ui-grid-a">
    <div class="ui-block-a" >
    <div class="ui-bar ui-bar-e">
       <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodará a la mitad de pagina.
    </div>
    </div>
    <div class="ui-block-b">
    <div class="ui-bar ui-bar-a">
       <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodará a la otra mitad de pagina.
    </div>
    </div>
       <div class="ui-block-a" >
    <div class="ui-bar ui-bar-c">
       <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodará a la mitad de pagina.
    </div>
    </div>

       <div class="ui-block-b">
    <div class="ui-bar ui-bar-b">
       <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodará a la otra mitad de pagina.
    </div>
    </div>
    </div>





   </div>

<div data-role="footer" data-position="fixed">
    <h3>Grillas</h3>
</div>
</div>

</body>
</html>

También puedes ver el ejemplo en marcha en una página aparte, donde podrás apreciar las tres columnas también, además de las tres filas, código que no dejo completo, para no redundar mucho, así que si lo quieres puedes ver el código fuente del ejemplo.

Dairo Galeano

Desarrollador independiente

Follow {{ $author->twitter }}

Manual

Manual de jQuery Mobile

Elementos Collapsible de jQuery Mobile

Crear temas personalizados para tus aplicaciones jQuery Mobile