jQuery Mobile

Divisores automáticos de listas con jQuery Mobile

17/May/2012

En el artículo Divisores de listas con jQuery Mobile veíamos como organizar una lista de elementos para que saliese organizada por divisores.

Así utilizando el atributo data-role=»listdivider» podíamos añadir elementos divisores en la lista.

Uno de los inconvenientes que tiene la utilización de data-role=»listdivider» es que nos tenemos que asegurarnos de generar los elementos divisores.

Pero tenemos otra opción en jQuery Mobile que es la de generar divisores automáticos en las listas. Para generar divisiores automáticos en jQuery Mobiledeberemos de utilizar el atributo data-autodividers=»true» asignado a una lista. Es decir, asignado a una lista data-role=»listview».

Si bien hay que tener cuidado con el orden en el que generamos los items, ya que la organización de los divisores es en función del primera carácter. De esta manera ante un cambio de carácter genera automáticamente un divisor. Aunque en siguientes items vuelva a repetirse dicho carácter.

El atributo data-autodividers=»true» solo está disponible a partir de jQuery Mobile 2.0. Es decir, que de momento solo podemos utilizarlo con las versiones en desarrollo. Así que puedes descargarte la última versión de jQuery Mobile generada por Github.

Para cambiar la ordenación por defecto de las listas en jQuery Mobile con divisores automáticos se puede utilizar el método .listview().

$(document).ready(function(){
	$("#milista").listview({
  	autodividers: true,
  	autodividersSelector: function ( li ) {  		
	  /*  Generar una cadena basada en el contenido de li
	  		Tiene que retornar el divisor asociado a ese li */
  	}
	});
});

Yo no lo he conseguido hacer funciona. Si alguien lo consigue. Qué avise. :-D

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