Cómo utilizar jQuery Mobile

[Fuente: http://devgrow.com/mobile-web-dev-using-jquery-mobile/]

jQuery Mobile es increiblemente fácil de utilizar, tan solo es necesario incluir las librerias js de jQuery Mobile en el header y añadir unos pocos atributos “data” en tu maquetación y ya tienes tu web con jQuery Mobile. Todo el tema de los estilos es manejado por jQuery y los ficheros CSS que hay que incluir, asi que literalmente se puede crear una web con jQuery Mobile en minutos. Vamos a crear una de ejemplo que tendrá varios links internos para utilizar varios efectos de transiciones.

Paso 1. Incluir los ficheros de jQuery Mobile en el Header de tu maqueta

Puedes descargar las librerias o referenciar directamente los ficheros que hay colgados de forma pública (esto se llama CDN hosted links , tiene ventajas como reducir los costes de ancho de banda y hacer tu web más rápida).

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />  
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

Paso 2. Utilizar el atributo data en el HTML

Veamos un ejemplo que contiene atributos “data” y lo explicamos a continuación:

<div data-role="page" data-theme="b">
        <div data-role="header" data-theme="b">
            <h1>My Site</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
                <li data-role="list-divider">Transition Effects</li>
                <li><a href="effects.php?id=slide" data-transition="slide">Slide</a></li>
                <li><a href="effects.php?id=slideup" data-transition="slideup">Slide Up</a></li>
                <li><a href="effects.php?id=slidedown" data-transition="slidedown">Slide Down</a></li>
                <li><a href="effects.php?id=pop" data-transition="pop">Pop</a></li>
                <li><a href="effects.php?id=flip" data-transition="flip">Flip</a></li>
                <li><a href="effects.php?id=fade" data-transition="fade">Fade</a></li>
            </ul>
            <br /><br />
            <ul data-role="listview" data-dividertheme="e">
                <li data-role="list-divider">Seamless List (margin-less)</li>
                <li><a href="#" data-transition="slide">Example Item 1</a></li>
                <li><a href="#" data-transition="slide">Example Item 2</a></li>
                <li><a href="#" data-transition="slide">Example Item 3</a></li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>© Copyright Info or Site URL</h1>
        </div>
    </div>

El elemento “data-role” especifica que DIV o bloque debe ser utilizado para el header, cual para el footer y cual para el contenido, donde todos ellos estarán incluidos en un bloque “page” principal. Veamos en más detalle estos atributos “data” aqui utilizados:

• data-role –  especifica la naturaleza del elemento envoltorio al que se aplica, puede ser : page,header, content, footer.Otros valores que aparecen en el ejemplo son para indicar list elements y list dividers: listview para el elemento principal de la lista y list-divider para el list divider. Hay algunos otros valores , como por ejemplo collapsible ej qye crea bloque que se puede mostrar u ocultar.
• data-position – especifica si el elemento debe ser fixed , es decir fijado en un sitio siempre, en tal caso se pintará en el top (para el header) o en el bottom (para el footer). En el ejemplo de arriba esta puesto en el pie, el efecto que veo que tiene este atributo es que si lo quito el pie se pega al final del contenido , pero si lo pongo entonces el pie se queda pegado al fondo de la ventana del navegador
• data-inset – especifica si el elemento debe estar dentro de los margenes del contenido o fuera. Se pone a true o false. Lo que veo es que cuando es false (por defecto si no se especifica) el elemento ocupa el 100% de la pantalla y si se pone a true se le quedan unos margenes por ambos lados.
• data-transition – especifica qué transición utilizar cuando se cargan nuevas páginas, puede tener los valores slide, slideup, slidedown, pop, flip or fade
• data-theme – especifica que theme de diseño para los elementos dentro del contenedor que lo especifica, puede ser a, b, c, d, e
• data-dividertheme – especifica el theme de diseño para los list dividers utilizando los mismos valores que al data-theme

Paso 3. Añadiendo contenido

Ya estas preparado para añadir el contenido que quieras a los distintos contenedores que tienes en la maquetación. No es estrictamente necesario utilizar un smartphone para probarlo porque los navegadores de internet lo saben interpretar (sobre todo el Google Chrome) , aunque bien es cierto que tener uno puede ayudar a encontrar bugs del jQuery Mobile.

Accesibilidad y precauciones

Ahora mismo, la versión Alpha de jQuery Mobile es compatible con todas las versiones de safari para IOS y para la mayoría de los navegadores de Android. BlackBerry es parcialmente soportado. Para más info ver la compatibility chart.

Un beneficio adicional de jQuery Mobile es que carga las páginas utilizando AJAX automáticamente.