Manejo de listas con jQuery Mobile

Las listas son elementos muy importantes para lograr una correcta navegación en un sitio móvil, en este artículo explicamos como utilizarlas y adaptarlas con jQuery Mobile

Las listas son elementos de gran utilidad para crear menús que faciliten la accesibilidad a los usuarios en un sitio web móvil. jQuery Mobile ofrece gran cantidad de opciones para adaptar estos elementos a nuestro sitio, permitiéndonos manejar desde listas sencillas hasta listas con miniaturas personalizadas y múltiples acciones.

En este artículo, explicaremos cómo crear listas adaptables, con aspecto adecuado para dispositivos móviles, así como también mostraremos cómo crear submenús y dar estilos distintos a las listas que conforman el sitio.

Creación de listas

Al crear listas utilizando jQuery Mobile, se puede dar una clara mejora en lo que respecta a la interfaz de usuario de dichos elementos. Para lograr su creación, basta con construir una lista ordinaria, utilizando HTML simple, y agregar unos cuantos atributos, para que de esa manera el framework se encargue del trabajo pesado y mejore su UI.

La estructura básica de una lista desordenada en HTML luce de la siguiente manera:

<ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
    <li>Elemento de lista 4</li>
</ul>

Como todos sabemos, por defecto, las listas tienden a tomar un formato con viñetas, el cual a simple vista no luce muy estético para una aplicación móvil. Para poder mejorar esto, basta con agregar el atributo data-role=”listview” a la etiqueta ul y obtendremos un cambio drástico de apariencia.

Ahora las listas lucirán mucho más adaptadas al diseño general del sitio web móvil, las viñetas desaparecen pero los elementos de la lista son mucho más grandes y fáciles de leer.

En caso de que agregaramos enlaces a los elementos de lista, una imagen de flecha se añadiría al extremo derecho de la barra que representa a cada elemento.

<ul data-role="listview">
    <li><a href="1.html">Elemento de lista 1</a></li>
    <li><a href="2.html">Elemento de lista 2</a></li>
    <li><a href="3.html">Elemento de lista 3</a></li>
    <li><a href="4.html">Elemento de lista 4</a></li>
</ul>

Estos estilos se agregan automáticamente cuando jQuery Mobile detecta un enlace dentro de tu lista. De esta manera, podemos apreciar la facilidad con la que el framework convirtió una lista común y corriente en un menú de sistema. Sin embargo, esto no para ahí, todos sabemos que HTML soporta listas multinivel, entonces ¿Qué pasa si manejamos este tipo de listas con el framework?

Si utilizamos una estructura estándar de lista multinivel dentro de la misma página, jQuery mobile se encargará de ocultar las listas anidadas al nivel superior, convirtiendo a los elementos de este nivel en enlaces. De esa manera, cuando se acceda a la página, únicamente se observarán los elementos pertenecientes al nivel más alto, los cuales contarán con un icono de flecha indicando que enlazan a una acción.

Al momento de dar clic sobre los elementos de la lista inicial, se cargará el submenú que contiene dicho elemento. De igual manera, podremos observar que la dirección URL cambia.

Uso de listas inset

Uno de los cambios más sencillos y representativos que puedes realizar a tus listas, es convertirlas en listas inset. Este tipo de listas se caracterizan por no ocupar todo el ancho de la pantalla del dispositivo, ya que su renderización se hace dentro de un recuadro en el interior de la página.

Para poder lograr su creación, basta con tomar la lista que ya tenemos y agregar el atributo “data-inset”, al cual le daremos el valor de “true”.

<ul data-role="listview" data-inset="true">
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
    <li>Elemento de lista 4</li>
</ul>

El resultado será una lista dentro de un recuadro con esquinas redondeadas, el cual contará con espacio a su alrededor.

Añadir separadores de listas

Otro elemento de interfaz interesante que podemos agregar a nuestras listas, son los separadores. Estos elementos son utilizados para agrupar grandes listas en partes más pequeñas, haciendo que sea más fácil su comprensión.

Para poder crear separadores de listas, basta con agregar un nuevo elemento “li” el cual cuente con el atributo data-role=”list-divider”. De esta manera jQuery Mobile se encargará de agregar un estilo distinto para dicho elemento haciéndolo resaltar y permitiendo indicar a través de él el inicio de un nuevo grupo de elementos.

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Separador 1</li>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li data-role="list-divider">Separador 2</li>
    <li>Elemento de lista 3</li>
    <li>Elemento de lista 4</li>
</ul>

Creación de contadores

Una gran utilidad que nos ofrece jQuery Mobile, es la posibilidad de agregar contadores al extremo de cada elemento de una lista. Estos contadores, son básicamente una serie de números dentro de un círculo o burbuja, los cuales se encargan de indicar lo que tú desees, como por ejemplo cuántos elementos se encuentran anidados dentro de cada parte del nivel superior de la lista, cuántas partes componen ese objeto o cuántas veces se realizo la acción que se enlista.

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Separador 1</li>
    <li>Elemento de lista 1<span class="ui-li-count">9</span></li>
    <li>Elemento de lista 2<span class="ui-li-count">8</span></li>
    <li>Elemento de lista 3<span class="ui-li-count">5</span></li>
    <li>Elemento de lista 4<span class="ui-li-count">3</span></li>
</ul>

En este caso, utilizamos números de manera estática, pero en caso de desear un conteo dinámico, tú puedes desarrollar algún complemento para realizar la suma de dichos elementos.

Uso de imágenes e iconos

Otra necesidad que se puede presentar al desplegar elementos en lista, es el uso de imágenes. Para ello, jQuery Mobile ofrece soporte para el uso de imágenes en miniatura e iconos dentro de los elementos que componen una lista.

En caso de ya contar con una serie de imágenes en tamaño adecuado, basta con agregar dicha imagen al elemento de lista, para que esta sea mostrada en su interior. No hace falta de alguna clase o atributo extra, pero en caso de que se desee presentar dichas imágenes en forma de icono, sí se debe agregar una nueva clase la cual lleva por nombre “ui-li-icon”, e ira dentro del elemento de imagen.

Uso de buscadores

Al trabajar con listas muy largas, puede resultar difícil para el usuario identificar elementos. Para facilitar esta tarea, se puede optar por incluir un buscador, el cual permita filtrar los elementos que se muestran en la lista.

jQuery Mobile ofrece una manera muy sencilla de agregar esta funcionalidad, basta con añadir el atributo “data-filter” con valor “true” a la lista y automáticamente se añadirá un elemento de búsqueda al principio de la lista.

<ul data-role="listview" data-inset="true" data-filter="true">
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
    <li>Elemento de lista 4</li>
    <li>Elemento de lista 5</li>
    <li>Elemento de lista 6</li>
    <li>Elemento de lista 7</li>
    <!-- más elementos -->
</ul>