feed twitter facebook LinkedIn facebook

Desarrollo Móvil » Divisores de listas con jQuery Mobile

mayo 11, 2012 por Víctor Cuervo 5 Comentarios Imprimir 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 Mobile.

Ahora vamos a ir un paso más allá y vamos a ver como añadir elementos divisores en las listas. Es decir, items que nos permitan separar elementos para su organización. Puede ser una agrupación alfabética, geográfica, horaria,...

En nuestro caso vamos crear una lista de películas cuyos divisores sean alfabéticos.

C
++ Casablanca
++ Charada
D
++ Dos hombres y un destino
++

Lo primero que hacemos es cargar el framework jQuery Mobile

  1. <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
  2. <script src="jquery-1.7.1.min.js"></script>
  3. <script src="jquery.mobile-1.1.0.min.js"></script>

Y como vimos en el ejemplo Listas de Elementos en jQuery Mobile utilizamos un elemento UL con un atributo data-role="listview".

  1. <ul data-role="listview" data-inset="true" data-filter="true">
  2. <li><a href="#">Casablanca</a></li>
  3. <li><a href="#">Charada</a></li>
  4. <li><a href="#">Dos Hombres y Un Destino</a></li>
  5. <li><a href="#">Espartaco</a></li>
  6. <li><a href="#">El Golpe</a></li>
  7. <li><a href="#">La Guerra de las Galaxias</a></li>
  8. <li><a href="#">Granujas a todo ritmo</a></li>
  9. </ul>

Además hemos añadido los atributos data-inset="true" y data-filter="true" para que la lista salga enmarcada y para tener un filtro en la lista, respectivamente.

Ahora meteremos los divisores de listas. Los divisores de listas serán otros elementos LI. Si bien estos elementos para ser diferenciados del resto de elementos de la lista tendrán un atributo data-role="list-divider". Quedándonos nuestro código jQuery Mobile de la siguiente forma:

  1. <ul data-role="listview" data-inset="true" data-filter="true">
  2. <li data-role="list-divider">C</li>
  3. <li><a href="#">Casablanca</a></li>
  4. <li><a href="#">Charada</a></li>
  5. <li data-role="list-divider">D</li>
  6. <li><a href="#">Dos Hombres y Un Destino</a></li>
  7. <li data-role="list-divider">E</li>
  8. <li><a href="#">Espartaco</a></li>
  9. <li data-role="list-divider">G</li>
  10. <li><a href="#">El Golpe</a></li>
  11. <li><a href="#">La Guerra de las Galaxias</a></li>
  12. <li><a href="#">Granujas a todo ritmo</a></li>
  13. </ul>

El nombre del item que utiliza el atributo data-role="list-divider" será el nombre que se utilice como elemento divisor.

El efecto conseguido con jQuery Mobile para crear divisores de lista será algo parecido a:

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. Sergio
    mayo 11, 2012 #

    Buen tutorial, una pregunta….. de casualidad sabes que evento es el que se activa cuando cambia la orientación del aparato?
    No puedo encontrar cual es y es que la aplicación truena al cambiar la orientación

  2. Víctor Cuervo
    mayo 12, 2012 #

    @Sergio,

    En jQuery tienes que controlar el evento “orientationchange”.
    Sería algo así.

    $(document).bind(“orientationchange”, function(event){…});

    A ver si podemos publicar algo de control de orientación. Espero que de momento te sirva.

    Saludos.

  3. Víctor Cuervo
    mayo 13, 2012 #

    @Sergio,

    Ya te hemos dejado el ejemplo hecho y comentado en
    http://lineadecodigo.com/desarrollo-movil/detectar-la-rotacion-del-dispositivo-con-jquery-mobile/

    Espero que te sirva. Saludos.

Deja un comentario

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

*