Listas con imágenes en jQueryMobile

Vamos con una entrada sobre jQueryMobile, que hace que no le damos a la Mobile Web (sigo a la espera de que empiece el curso de Audacity, al que me apunté ya en agosto…). Ya hablamos de cómo hacer listas, desde luego, pero ¿cómo hacer listas con un pequeño thumbnail a la izquierda? Es muy simple, de hecho.

Como siempre empiezas descargando jQuery y jQueryMobile y añadiéndolos a tu código. Luego en el código metes una lista aplicándole un par de clases… pero eso mejor lo vemos con ejemplos de código. En este primer ejemplo veremos una lista donde cada elemento es un enlace, con una foto en la izquierda y un texto grande:

<ul data-role="listview">/*A la lista le aplicamos el data-role listview*/
  <li><a href="#1"><img src="img/foto1.png" width="100" height="100"/><h3>Elemento1</h3></a></li> /*En cada elemento metemos un enlace, una imagen (tamaño 100+100) y un título h3*/
  <li><a href="#2"><img src="img/foto2.png" width="100" height="100"/><h3>Elemento2</h3></a></li>
  <li><a href="#3"><img src="img/foto3.png" width="100" height="100"/><h3>Elemento3</h3></a></li>
</ul>

Esto es muy básico, vamos con algo más chulo: el mismo ejemplo, pero con un texto más pequeño debajo del título y con divisores:

<ul data-role="listview" data-inset="true" data-autodividers="true" data-filter="true">/*A la lista le aplicamos el data-role listview y el resto de configuración*/
  <li><a href="#1"><img src="img/foto1.png" width="100" height="100"/><h3>Elemento1</h3>
<p>Este es el primer elemento</p></a></li> /*En cada elemento metemos un enlace, una imagen (tamaño 100+100) y un título h3, y además una pequeña descripción*/
  <li><a href="#2"><img src="img/foto2.png" width="100" height="100"/><h3>Elemento2</h3>
<p>Este es el segundo elemento</p></a></li>
  <li><a href="#3"><img src="img/foto3.png" width="100" height="100"/><h3>Elemento3</h3>
<p>Este es el tercer elemento</p></a></li>
  <li><a href="#3"><img src="img/foto3.png" width="100" height="100"/><h3>Forma1</h3>
<p>Este es un elemento con otra letra para que se vea el divider</p></a></li> /**Y este último... para que se vea el divisor*/
</ul>

Y con este simple ejemplo puedes darle vida a tus listas.

Creando un menú de navegación con jQueryMobile

Crear un menú de navegación con jQueryMobile, adaptando la web para una mayor usabiliad en dispositivos móviles, no es complicado.

El primer paso consiste en declarar el atributo data-role del div como navbar. Dentro de este metemos una lista desordenada (ul) y en cada elemento (li) de la misma añadimos un enlace, apuntando a la página a la que tiene que ir. A los enlaces no hay que definirles data-role.

Para cambiar el color de los botones usaremos el atributo data-theme (en el ejemplo data-theme=b para ponerlos de color azul), si no lo hacemos serán del mismo color que la cabecera. Una de las ventajas de jQueryMobile es que definiendo la clase ui-btn-active se un estilo más claro al botón seleccionado, sin que tengamos que currarnos un CSS para ello.

Recuerda también definir el data-icon para que el botón quede más bonito.

<header data-role="header"> 
    <h1>SJV Town Hall</h1>
    <div data-role="navbar">
        <ul>
             <li>
                 <a href="#inicio" class="ui-btn-active" data-icon="home" data-theme="b">Inicio</a>
             </li>

             <li>
                 <a href="#favourites" data-icon="star" data-theme="b">Favoritos</a>
             </li>

             <li>
                 <a href="#contactos data-icon="grid" data-theme="b">Contactos</a>
             </li>
         </ul>
       </div>
</header>

En el ejemplo puedes ver un poco de todo lo que hemos comentado arriba.

Listas en jQueryMobile: ordenadas y desordenadas

A la hora de trabajar tanto con listas ordenadas o listas desordenadas con jQueryMobile no hay mucha ciencia, es como trabajar con listas en html clásico.

Mayormente hay que usar la etiqueta ul para listas desordenadas y ol para ordenadas, como en cualquier página. La única diferencia es añadir el atributo data-role=”listview”. Esto es lo único que necesitas en jQueryMobile para aplicar el estilo “móvil” a la lista. Te pongo un ejemplillo


<ol data-role="listview" data-inset="true" data-filter="true">
   <li><a href="#">El Resplandor</a></li>
   <li><a href="#">La Naranja Mecánica</a></li>
   <li><a href="#">Barry Lyndon</a></li>
   <li><a href="#">La Chaqueta Metálica</a></li>
</ol>

<ul data-role="listview" data-inset="true">
   <li><a href="#">Gran Torino</a></li>
   <li><a href="#">Mystic River</a></li>
   <li><a href="#">Million Dollar Baby</a></li>
   <li><a href="#">Sin Perdón</a></li>
</ul>

Sep, la lista ordenada son películas de Kubrick y la sin índices son de Clint Eastwood. Y no hay más que hablar, sólo el atributo data-role=”listview”, por el resto HTML de toda la vida.