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

  1. Bitacoras.com
    mayo 10, 2012 #

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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íamo……

  2. Linea de Codigo » Divisores de listas con jQuery Mobile
    mayo 11, 2012 #

    [...] Mobile Mayo 11, 2012 por Víctor Cuervo . 14 visitas Sin Comentarios  Imprimir En el ejemplo Listas de Elementos en jQuery Mobile veíamos como construir una lista de elementos para un dispositivo móvil utilizando jQuery [...]

  3. Listas con botones de acción en jQuery Mobile | Linea de Codigo
    mayo 19, 2012 #

    [...] Lo primero que haremos será crear una lista básica tal y como vimos en Listas de Elementos con jQuery Mobile. [...]

  4. Filtrar elementos con jQuery Mobile | Linea de Codigo
    mayo 26, 2012 #

    [...] Si partimos de una lista sencilla con jQuery Mobile: [...]

  5. Listas Ordenadas con jQuery Mobile | Linea de Codigo
    mayo 28, 2012 #

    [...] Comentarios  Imprimir Aunque en los ejemplos que hemos visto hasta ahora con jQuery Mobile (lista de elementos, filtrar elementos, listas anidadas,…) las listas utilizadas no tenían ningún orden, con jQuery [...]

Deja un comentario

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

*