Listas con imágenes en jQuery Mobile

30/May/2012 Desarrollo Móvil , , , , , 1 Comentario

Las listas de elementos que desarrollemos para nuestros dispositivos móviles con jQuery Mobile no solo tiene por qué estar compuestas de texto, si no que también pueden contener imágenes dentro de la lista.

Imaginemos una lista de películas dónde cada una de las películas lleva la caratula de dicha película.

Lo primero que tenemos que hacer es crear la lista de elementos mediante el atributo data-role="listview".

  1. <ul id="mylistview" data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Qué película buscas?">
  2. <li><a href="#"><h3>Casablanca</h3></a></li>
  3. <li><a href="#"><h3>Charada</h3></a></li>
  4. <li><a href="#"><h3>Dos Hombres y Un Destino</h3></a></li>
  5. </ul>

Vemos que hemos utilizado un elemento H3 para dar mayor relevancia al contenido del elemento de la lista. Ya que luego seguiremos añadiendo información a dicho elemento y el título será lo más representativo.

Ahora para meter la imagen simplemente tendremos que utilizar un elemento IMG de HTML. Pondremos el elemento IMG antes del contenido del título:

  1. <ul id="mylistview" data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Qué película buscas?">
  2. <li><a href="#"><img src="img/casablanca.png" width="100" height="100"/><h3>Casablanca</h3></a></li>
  3. <li><a href="#"><img src="img/charada.png" width="100" height="100"/><h3>Charada</h3></a></li>
  4. <li><a href="#"><img src="img/doshombresyundestino.png" width="100" height="100"/><h3>Dos Hombres y Un Destino</h3></a></li>
  5. </ul>

Ya tenemos las imágenes puestas dentro de nuestra lista de elementos en jQuery Mobile. Ahora ya solo nos queda meter mas información a los elementos. Eso, sí, solo si queremos.

Al final el código jQuery Mobile nos quedará de la siguiente forma:

  1. <ul id="mylistview" data-role="listview" data-inset="true" data-autodividers="true" data-filter="true" data-filter-placeholder="Qué película buscas?">
  2. <li><a href="#"><img src="img/casablanca.png" width="100" height="100"/><h3>Casablanca</h3><p>Situado en África desocupada durante... <br/>Categor&iacute;a: Drama</p></a></li>
  3. <li><a href="#"><img src="img/charada.png" width="100" height="100"/><h3>Charada</h3><p>El romance y suspenso en París, como una mujer... <br/>Categor&iacute;a: Comedia</p></a></li>
  4. <li><a href="#"><img src="img/doshombresyundestino.png" width="100" height="100"/><h3>Dos Hombres y Un Destino</h3><p>Dos ladrones de bancos y trenes occidentales ladrones huyen a Bolivia ...<br/>Categor&iacute;a: Biograf&iacute;a</p></p></a></li>
  5. </ul>

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

Un comentario en “Listas con imágenes en jQuery Mobile”

Víctor Cuervo

Javier

despues de href a mi no me funciona sin este attributo data-ajax=”false”

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*