feed twitter facebook LinkedIn facebook

Desarrollo Móvil » Listas de Elementos en jQuery Mobile

mayo 10, 2012 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

jQuery Mobile nos ofrece una forma sencilla de adaptar nuestras listas a los dispositivos móviles. Y es que una lista de elementos para el diseño móvil se sigue maquetando con los elementos UL y LI.

Es decir, que podríamos tener una lista tal y como esta:

  1. <li>Avila</li>
  2. <li>Burgos</li>
  3. <li>León</li>
  4. <li>Palencia</li>
  5. <li>Salamanca</li>
  6. <li>Segovia</li>
  7. <li>Soria</li>
  8. <li>Valladolid</li>
  9. <li>Zamora</li>
  10. </ul>

Si bien jQuery Mobile nos proporciona una serie de características para maquetarla. La primera es la que le da la apariencia. Esta la conseguimos con un atributo data-role. En este caso con data-role="listview".

Este atributo lo añadimos al elemento UL.

  1. <ul data-role="listview">
  2. ...
  3. </ul>

Y conseguiremos el siguiente efecto de maquetación.

Lo que podemos apreciar en la imagen es que la lista no se diferencia de forma correcta del contenido de la página. Si queremos que la lista se diferencia del resto del contenido podemos añadirla un recuadro. Esto nos lo posibilita el atributo data-inset="true".

  1. <ul data-role="listview" data-inset="true">
  2. ...
  3. </ul>

Por último podemos añadirle un filtro a nuestra lista. Y es que esto lo conseguimos de una forma sencilla con el atributo data-filter="true". No solo añadiremos un filtro, si no que el filtro realiza el filtrado del contenido de la lista.

  1. <ul data-role="listview" data-inset="strong" data-filter="true">
  2. ...
  3. </ul>

EL código final de nuestra lista de elementos en jQuery Mobile quedaría de la siguiente forma:

  1. <ul data-role="listview" data-inset="true" data-filter="true">
  2. <li>Avila</li>
  3. <li>Burgos</li>
  4. <li>León</li>
  5. <li>Palencia</li>
  6. <li>Salamanca</li>
  7. <li>Segovia</li>
  8. <li>Soria</li>
  9. <li>Valladolid</li>
  10. <li>Zamora</li>
  11. </ul>
Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery Mobile
Foro sobre jQuery Mobile
tags: , , , , , , ,

Artículos relacionados:

5 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*