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.