Divisores de listas con jQuery Mobile

11/may/2012 Desarrollo Móvil , , , , , , , 5 Comentarios

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:

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

5 comentarios en “Divisores de listas con jQuery Mobile”

Víctor Cuervo

Víctor Cuervo

@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.

Víctor Cuervo

Víctor Cuervo

@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.

Víctor Cuervo

Sergio

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

¿Algo que nos quieras comentar?

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

*


*