A lo largo de diversos artículos del Manual de jQuery Mobile venimos expresando las grandes ventajas que tiene usar este framework para crear aplicaciones, orientadas a dispositivos móviles, con una poderosa interfaz grafica de usuario (GUI). En el artículo anterior pudimos ver un ejemplo de ello: Crear botones con jQuery Mobile. La forma de usar los widgets que vienen predeterminados en el framework es una tarea muy sencilla, pero obtenemos resultados impactantes, con los cuales podremos sorprender a nuestros amigos.

Uno de los componentes de interfaz gráfica de usuario más relevante, eficiente y útil en jQuery Mobile son las listas, ya que nos pueden servir como menús de contextos, o cualquier otro uso que le podamos dar en nuestras aplicaciones web móviles. El límite está en nuestra imaginación, pues todo en este framework se amolda de acuerdo con nuestras necesidades, o más bien, las características especificas del dispositivo móvil que lo cargue.

Llegará el momento en el que tendremos que mostrar un catalogo de artículos, o servicios de una empresa, o cualquier cosa similar. Esta es una tarea que podemos cumplir con los componentes o widgets listas, que creamos con jQuery Mobile.

Siguiendo el ejemplo del catálogo de productos, podemos tener cada uno de los artículos organizados en nuestras listas y al hacer clic, estaríamos viajando de forma directa a una página, que nos mostrara toda la información del elemento seleccionado.

Ejemplo ilustrativo con listas

Para este articulo donde estamos trabajando con listas vamos a crear un ejemplo bastante sencillo pero muy ilustrativo de las cosas que podemos hacer con dichos elementos. Con esto obtendremos un horizonte de ideas e ilustraciones de cosas útiles por hacer con las listas, que nos brinda jQuery Mobile

Nuestro ejemplo tendrá cuatro páginas web, incluidas dentro del mismo documento HTML. En la primera crearemos de inmediato una lista, que nos servirá como ejemplo clásico e ilustrativo de este articulo. En la lista habrán tres elementos con textos diferentes, al hacer clic sobre uno estaremos viendo una pequeña información sobre aquello que se haya seleccionado.

La información de cada uno de los textos presentes en los elementos de la lista se albergará en las tres páginas restantes. Aunque en nuestro ejemplo no serán productos, sino medios de transporte.

Inicialmente comenzaremos creando una lista sencilla con todas las configuraciones predeterminadas por jQuery Mobile, ya sobre la marcha iremos configurándola para conseguir mejores efectos visuales. Para obtener una lista sencilla basta con un código como este:

<ul data-role="listview" >
<li><a href="#coche" >Coche</a></li>
<li><a href="#avion">Avión</a></li>
<li><a href="#aeroplano">Aeroplano</a></li>
</ul>

Hasta aquí hemos conseguido crear una lista sencilla, donde sus elementos servirán como enlace para comunicarnos con otras tres páginas web. Cada página esta relacionada de forma directa con los elementos de la lista, es decir, que al dar clic sobre el elementos con texto de "Coche", el navegador nos llevará a una página que contiene información acerca de los coches.

Enriquecer visualmente las listas

Al igual que en el caso de los botones, podemos hacer ciertas modificaciones e ir agregando atributos a las listas de forma directa sobre las etiquetas HTML. Esta posibilidad de configurar los propios widgets en el código HTML facilitará mucho la vida, a la hora de crear nuestras aplicaciones con jQuery Mobile.

Divisiones:
Lo primero que vamos a hacer con las listas es crear unos divisores, que son otros elementos de la lista, pero que actúan de forma diferente. Éstos elementos son solo para orientar al usuario en la lista. En otras palabras, ellos actúan como una especie de objetos inhabilitados a los eventos que se puedan generar por el usuario, y por tanto, no reaccionaran al clic al doble o al teclado etc.

En las listas se pueden agregar o indexar divisores en cualquier lugar, algo que es muy frecuente, pues aunque no respondan a ningún evento, ellos cumplen una tarea importante. Se trata de una forma visual de mantener informado al usuario que está usando nuestra aplicación web.

A continuación vamos a crear divisores en nuestra lista, estos nos servirán para indicar los diferentes tipos de medios de transporte, que en nuestro ejemplo son: Transporte terrestre y transporte aéreo, para que nuestro usuario sepa por donde va.

La tarea con los divisores es muy sencilla y se consigue con un código como el siguiente.

<ul data-role="listview" >
   <li data-role="list-divider">Medios de transporte terrestrses</li>
<li><a href="#coche" >Coche</a></li>
   <li data-role="list-divider">Medios de transporte Aéreos</li>
<li><a href="#avion">Avión</a></li>
<li><a href="#aeroplano">Aeroplano</a></li>
</ul>

Como pueden darse cuenta, es muy sencillo. Solo hay que agregar dos elementos <li> en la posición donde deseamos tener nuestros divisores, pero a estos elementos debemos asignarle el atributo data-role al cual le danos el valor de “list-divider”. Con ese único detalle es suficiente para obtener un divisor en nuestras listas.

Sangrado:
Otro asunto que atañe a las listas es que en su configuración por defecto no conservan un margen en la pagina. Si lo deseamos, podemos agregar ese margen por medio de un nuevo atributo a nuestra lista, que se coloca de forma directa en la etiqueta <ul> del HTML. Ese atributo es el data-inset, el cual recibe un valor booleano, es decir, que si queremos producir el margen solo que darle valor de true al atributo. Con esto obtendremos una lista que conservará ciertos márgenes con respecto a la pagina, además de crearle un borde redondeado. Todo eso se logra con un código como este:

<ul data-role="listview" data-inset="true">

Temas gráficos de personalización:
Los componentes de interfaz grafica de usuario en jQuery Mobile comparten la gran mayoría de atributos, es decir, que a nuestra lista podemos modificar su data-theme con el fin de obtener una lista con color diferente. Esto se consigue igual que se explicó en los botones, con un código HTML como el siguiente:

<ul data-role="listview" data-inset="true" data-theme="b">

También podemos hacer modificaciones en sus divisores agregando un nuevo atributo en la etiqueta <ul>. Es útil hacer esto para que nuestros divisores se diferencien de los demás elementos, quedándonos un código como este:

<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="a">

Como se puede observar, solo agregamos un nuevo atributo data-dividertheme con el que se la da un tema a los divisores de la a lista, este es el "a", con el conseguimos un color negro. El efecto es que los divisores aparecerán con el color diferente que asigna jQuery Mobile por defecto.

Código completo de uso de listas en jQuery Mobile

Pues bien, espero que hayan comprendido la importancia de las listas. Ahora, para mayor claridad de todo lo explicado vamos a compartir el código completo con todo lo que hemos tratado en este artículo. También usaremos aspectos vistos en la sección de Crear botones con jQuery Mobile, al igual que otros temas que se han tratado previamente en este manual.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Liastas con jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<scriptsrc="jquery-1.7.1.min.js"></script>
<scriptsrc="jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header"><h1>Listas</h1></div>
   <div data-role="content">
<ul data-role="listview" >
<li><a href="#coche" >Coche</a></li>
<li><a href="#avion">Avión</a></li>
<li><a href="#aeroplano">Aeroplano</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="a">
   <li data-role="list-divider">Medios de transporte terrestrses</li>
<li><a href="#coche" >Coche</a></li>
   <li data-role="list-divider">Medios de transporte Aereos</li>
<li><a href="#avion">Avión</a></li>
<li><a href="#aeroplano">Aeroplano</a></li>
</ul>
   
   </div>
   <div data-role="footer"><h3>Listas</h3>
</div>
</div>

<div data-role="page" id="coche">
   <div data-role="header"><h1>Coches</h1></div>
   <div data-role="content">
    Los coches son un medio de transporte terrestre<br>
   <a href="#inicio"data-role="button" data-theme="b" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Los coches</h3>
   </div>
</div>

<div data-role="page" id="avion">
   <div data-role="header"><h1>Aviones</h1></div>
   <div data-role="content">
    Los aviones son un medio de transporte aereo<br>
   <a href="#inicio"data-role="button" data-theme="e" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Aviones</h3>
   </div>
</div>

<div data-role="page" id="aeroplano">
   <div data-role="header"><h1>Aeroplanos</h1></div>
   <div data-role="content">
    Los aeroplanos son un medio de transporte aereo, menor que los aviones<br>
   <a href="#inicio"data-role="button" data-theme="d" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Aeroplanos</h3>
   </div>
</div>
</body>
</html>

Espero puedan comprender todo el código anterior. Recomiendo leer otros artículos previos del manual si es que tienes alguna duda sobre asuntos como el sistema multipaginas de jQuery Mobile.

Antes de acabar, quiero que se aprecie también que las tres páginas que contienen la información de los medios de transporte (coche, avión, aeroplano), tienen una forma de retorno al inicio. Son enlaces convertidos en botones, si no sabes cómo crear botones con jQuery Mobile revisa el artículo publicado anteriormente.

También puede ver el ejemplo en funcionamientos en una página aparte.

Con esto les dejo hasta la próxima entrega. Como siempre, es todo un placer poder compartir información con ustedes. Nos vernos pronto y no olvides dejar tus cometarios o dudas.