jQuery Mobile

Divisores de listas con jQuery Mobile

11/May/2012

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


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

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:

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:

Suscribir
Notificar de
guest
5 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios