El el anterior post Introducción a jQuery Mobile (I) realizamos una breve introducción al framework y analizamos los tiempos de carga de los ficheros con un ejemplo, entre otras cosas. Ahora explicaremos los componentes básicos, como modificar los parámetros iniciales de configuración añadiendo un fichero javascript adicional así como algún aspecto de diseño (themes).
Componentes
Además de poder utilizar elementos html básicos como listas, headings o tablas, jQuery Mobile nos proporciona los siguientes componentes.
Toolbars
En jQuery Mobile hay dos tipos estándar de toolbars. La Header bar y la Footer bar. La Header bar, por ejemplo, podrá incluir, sin necesidad de realizar ninguna modificación css, un título y dos botones. Si queremos una barra de navegación con más de dos enlaces lo correcto sería introducir el widget Navbar en la cabecera o en el pie. También podemos indicar si queremos las toolbars con posición fija.
Header con dos botones
Como podemos observar no es necesario poner en el enlace el data-role=”button” para que se comporte como tal. El framework entiende que un enlace dentro de un header tendrá el aspecto de un botón. Destacamos las propiedades data-role=”header” y rel=”external”.
<div data-role="header">
<a rel="external" href="http://facultia.com/">Inicio</a>
<h1>Facultia</h1>
<a rel="external" href="http://facultia.com/blog">Blog</a>
</div>
Ahora veamos un ejemplo de un footer con una barra de navegación, con posición fija, que contiene seis enlaces (cuando contiene más de cinco items los muestra en varias lineas horizontales). Destacamos las propiedades data-role=”footer”, data-position=”fixed” y data-role=”navbar”.
Footer con navbar
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
<li><a href="#">Cinco</a></li>
<li><a href="#">Seis</a></li>
</ul>
</div>
</div>
Buttons
Podemos crear botones con o sin iconos y/o con o sin texto. También podemos crear agrupaciones de botones, posicionarlos en la misma linea o posicionar su icono. En este ejemplo podemos ver una agrupación de dos botones en horizontal con su icono correspondiente. Destacamos las propiedades data-role=”controlgroup”, data-type=”horizontal”, data-role=”button”, data-icon=”arrow-l” y data-iconpos=”right”.
Ejemplo de botones agrupados
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="arrow-l">Izquierda</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Derecha</a>
</div>
Grids
A continuación podemos ver un ejemplo de un grid de 3 filas y 5 columnas. En este caso particular para generar 5 columnas utilizamos la clase “ui-grid-d” (por ejemplo si quisieramos generar únicamente un grid con dos columnas utilizaríamos la clase “ui-grid-a” o “ui-grid-b” para generar uno de 3 columnas). Luego para cada bloque la clase “ui-block-x” siendo x=a cuando es la primera columna, x=b cuando es la segunda y así sucesivamente empezando otra vez por “ui-block-a” cuando cambiamos de fila.
Ejemplo de grid
<div class="ui-grid-d">
<div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:50px">1,1</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-b" style="height:50px">1,2</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-b" style="height:50px">1,3</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-b" style="height:50px">1,4</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-b" style="height:50px">1,5</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:50px">2,1</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:50px">2,2</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:50px">2,3</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:50px">2,4</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:50px">2,5</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:50px">3,1</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-b" style="height:50px">3,2</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-b" style="height:50px">3,3</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-b" style="height:50px">3,4</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-b" style="height:50px">3,5</div></div>
</div>
Collapsible content blocks
A continuación mostramos un ejemplo de un collapsible block sencillo. Destacamos las propiedades data-role=”collapsible” para definir el tipo de elemento y “data-collapsed” para indicar si queremos ver el contenido desplegado o no. El contenido, como veremos en el ejemplo de accordions, puede ser de cualquier tipo (un listview, un formulario, etc,…)
<div data-role="collapsible" data-collapsed="true" data-theme="a">
<h3>Cabecera</h3>
<p>Contenido</p>
</div>
Accordions
Es posible agrupar varios ‘collapsible content blocks’ en un accordion. También se puede introducir cualquier elemento dentro de un bloque (por ejemplo un list view básico). Además de las propiedades destacadas en el ejemplo anterior destacamos el data-role=”collapsible-set”.
Ejemplo accordion
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true" data-theme="a">
<h3>Uno</h3>
<p>Contenido de uno</p>
</div>
<div data-role="collapsible" data-collapsed="false" data-theme="b">
<h3>Dos</h3>
<ul data-role="listview" data-theme="a" data-inset="true">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="a">
<h3>Tres</h3>
<p>Contenido de tres</p>
</div>
</div>
Form elements
Veamos en varios ejemplos los elementos básicos que se pueden introducir en un formulario. Si tuviera que destacar alguno sería, por ejemplo, el Slider o el Flip toggle switch. 
Text input
Ejemplo de text input
<!-- Ejemplo de elemtos de un formulario -->
<form action="#" method="POST">
<h2>Ejemplo de elementos de un formulario en jQuery Mobile</h2>
<!-- Text input -->
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
Password input
Ejemplo de password input
<!-- Password input -->
<div data-role="fieldcontain">
<label for="password">Password Input:</label>
<input type="password" name="password" id="password" value="" />
</div>
Textarea
Ejemplo de textarea
<!-- Textarea -->
<div data-role="fieldcontain">
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
Search input
Ejemplo de search input
<!-- Search input -->
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" />
</div>
Slider
Ejemplo de slider
Ejemplo de slider
<!-- Slider -->
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="75" min="50" max="100" />
</div>
Flip toggle switch
Ejemplo de Flip toggle switch
<!-- Flip toggle switch -->
<div data-role="fieldcontain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
Radio buttons
Ejemplo radio buttons
<!-- Radio buttons -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Ciudad favorita:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Barcelona</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Madrid</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Alicante</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Valencia</label>
</fieldset>
</div>
Checkboxes
Ejemplo checkboxes horizontal
Ejemplo checkboxes vertical
<!-- Checkboxes (horizontal) -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Checkboxes (horizontal):</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<label for="checkbox-1">Acepto</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<label for="checkbox-2">Email</label>
</fieldset>
</div>
<!-- Checkboxes (vertical) -->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Checkboxes (vertical):</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<label for="checkbox-1">Acepto las condiciones</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<label for="checkbox-2">Recibir notificaciones</label>
</fieldset>
</div>
Select
<!-- Select 1 -->
<div data-role="fieldcontain">
<label for="select-choice-1">Selección:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="corre lola corre">Corre Lola corre</option>
<option value="que bello es vivir">Qué bello es vivir</option>
<option value="el experimento">El experimento</option>
</select>
</div>
<!-- Select 2 -->
<div data-role="fieldcontain">
<label for="select-choice-nc">Selección por opciones:</label>
<select name="select-choice-8" id="select-choice-nc">
<optgroup label="Los Planetas">
<option value="Super 8">Super 8</option>
<option value="La leyenda del espacio">La leyenda del espacio</option>
<option value="Una opera egipcia">Una ópera egipcia</option>
</optgroup>
<optgroup label="The Beatles">
<option value="White album">The white album</option>
<option value="Revolver">Revolver</option>
</optgroup>
</select>
</div>
Select menu personalizado
<!-- Menu personalizado -->
<div data-role="fieldcontain">
<label for="select-choice-a">Menú personalizado:</label>
<select name="select-choice-a" id="select-choice-a" data-native-menu="false" tabindex="-1">
<option>Opción</option>
<option value="guardar">Guardar</option>
<option value="eliminar">Eliminar</option>
<option value="ver">Visualizar</option>
</select>
</div>
Submit buttons
<!-- Submit buttons (con Grid) -->
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</form>
Además de los elementos mostrados en el ejemplo podemos utilizar HTML5 input types (number, email, url, tel).
List views
Ejemplo listview 1
Ejemplo listview 2
<!-- List view 1 -->
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-filter="true" data-inset="true">
<li data-role="list-divider" role="heading">B</li>
<li data-theme="c">
<a href="#">
<img src="white_album.jpg">
<h3>Beatles, The</h3>
<p>White album</p>
</a>
<span class="ui-li-count">25</span>
<a href="#" data-rel="dialog" data-transition="slideup" title="Editar" data-theme="c"></a>
</li>
<li data-theme="c">
<a href="#">
<img src="rubber_soul.jpg">
<h3>Beatles, The</h3>
<p>Rubber soul</p>
</a>
<span class="ui-li-count">30</span>
<a href="#" data-rel="dialog" data-transition="slideup" title="Editar" data-theme="c"></a>
</li>
<li data-role="list-divider" role="heading">R</li>
<li data-theme="c">
<a href="#">
<img src="exile_on_main_street.jpg">
<h3>Rolling Stones, The</h3>
<p>Exile on Main St.</p>
</a>
<span class="ui-li-count">10</span>
<a href="#" data-rel="dialog" data-transition="slideup" title="Editar" data-theme="c"></a>
</li>
<li data-theme="c">
<a href="#">
<img src="black_and_blue.jpg">
<h3>Rolling Stones, The</h3>
<p>Black And Blue</p>
</a>
<span class="ui-li-count">50</span>
<a href="#" data-rel="dialog" data-transition="slideup" title="Editar" data-theme="c"></a>
</li>
</ul>
<!-- List view 2 -->
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" role="heading">Lunes, 5 de septiembre de 2011<span class="ui-li-count">2</span></li>
<li data-theme="c">
<a href="#">
<p class="ui-li-aside"><strong>10:00</strong> h.</p>
<h3>Manuel L. Jurado (@manuelljb)</h3>
<p><strong>Post de jQuery Mobile (II)</strong></p>
<p>Publicado el post de jQuery Mobile (II) para el blog de Facultia, espero que os sea de utilidad.</p>
</a>
</li>
<li data-theme="c">
<a href="#">
<p class="ui-li-aside"><strong>10:05</strong> h.</p>
<h3>Raúl Fraile (@raulfraile)</h3>
<p><strong>Versión beta de @facultia</strong></p>
<p>La versión beta de Facultia está prevista para principios de octubre. Muchas gracias por vuestro apoyo.</p>
</a>
</li>
</ul>
Modificación de parámetros por defecto
Para modificar los parámetros por defecto del framework, crearemos una nuevo fichero javascript y lo cargaremos en el orden mostrado a continuación.
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
Para modificar las propiedades introduciremos el siguiente código en nuestro nuevo javascript:
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
ajaxEnabled: true
});
});
Entre las opciones configurables destacamos: ajaxEnabled, loadingMessage, pageLoadErrorMessage. En el siguiente enlace puedes verlas todas y para que sirven: lista de todas las opciones.
Temas e iconos
A cada componente podremos aplicarle un swatch (data-theme=”x”). Por defecto jQuery Mobile tiene un tema con cinco swatches {a,b,c,d,e}. También podremos personalizados. Respecto a los iconos, con la propiedad data-icon podemos cambiar el tipo de icono en cualquier elemento que lo permita.
Contenido relacionado
En el próximo post explicaremos como hemos integrado jQuery Mobile con Symfony2 para Facultia y la forma que hemos pensado para, con una pequeña modificación, utilizar los mismos controladores y únicamente crear nuevas vistas para la versión móvil.
If you enjoyed this article, please consider sharing it!
Muy buen artículo y esperamos la versión beta! Ánimo
Muchas gracias por los ánimos, Chaume. Un saludo.
Buena elección. Yo lo he utilizado personalmente en un par de proyectos y sin duda es muy potente y sencillo de utilizar.
Tengo una pregunta, ¿podrías aconsejar algún emulador para probar el desarrollo para móviles que se pueda instalar en un ordenador? Necesito uno que inclusa tenga acceso a localhost y no parece sencillo encontrarlo.
Gracias de antemano
Hola Fran, nosotros utilizamos Opera Mobile Emulator.
Te permite seleccionar distintos perfiles de dispositivos según marca, probar varias resoluciones de pantalla, distintas densidades de píxels o seleccionar el tipo de input (touch, keypad, tablet).
También puedes pasarle distintos argumentos por línea de comandos.
Respecto a lo del localhost no tendrás ningún problema.
Esperamos haber resuelto tu pregunta.
Ya sabes que aquí estamos. Un saludo y muchas gracias.
Muchas gracias por la contestación. Voy a echarle un vistazo a ver que tal.
Felicidades! está muy clara la explicación para aquellos que nos estamos incluyendo en el mundo de JQuery Mobile, me gustaría saber que IDE recomiendas.
Muchas gracias Josefina. Respecto al IDE, nosotros utilizamos Netbeans aunque puedes utilizar cualquiera que te ayude con HTML y javaScript. Un saludo.
Lo primero agradecer tan excelente explicación sobre Jquery mobile.
Espero que sigáis con mas detalles en una nueva entrega como por ejemplo ver como hacer que en un select funcione un onchange para ir a otra página (o ver la forma humana de hacerlo porque he probado varias que he visto por ahí y no hay tu tía).
Con respecto al emulador, yo uso este:
Ripple
Permite acceso a localhost y tiene un montón de modelos de móvil.
Saludos.
Muchas gracias Juan Ramón. Sí que tenemos pensando realizar un par de artículos más avanzados. Se agradece tu recomendación sobre el emulador que utilizas. Lo probaremos. Un saludo.
Esperando con muchas ganas vuestro proximo articulo: Integracion de jQuery Mobile con Symfony.
Felicidades por vuestro blog, muy bueno!
Muchas gracias Miriam. Un saludo.
[...] Introducción a jQuery Mobile (II) [...]