Desarrollo Móvil » Divisores automáticos de listas con jQuery Mobile
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.
<ul data-role="listview" data-inset="true" data-filter="true"> <li data-role="list-divider">C</li> <li><a href="#">Casablanca</a></li> <li><a href="#">Charada</a></li> <li data-role="list-divider">D</li> <li><a href="#">Dos Hombres y Un Destino</a></li> <li data-role="list-divider">E</li> <li><a href="#">Espartaco</a></li> <li data-role="list-divider">G</li> <li><a href="#">El Golpe</a></li> <li><a href="#">La Guerra de las Galaxias</a></li> <li><a href="#">Granujas a todo ritmo</a></li> </ul>
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".
<ul id="mylistview" data-role="listview" data-inset="true" data-autodividers="true"> <li><a href="#">Casablanca</a></li> <li><a href="#">Charada</a></li> <li><a href="#">Dos Hombres y Un Destino</a></li> <li><a href="#">Espartaco</a></li> <li><a href="#">El Golpe</a></li> <li><a href="#">El Silencio de los Corderos</a></li> <li><a href="#">El Padrino</a></li> <li><a href="#">Granujas a todo ritmo</a></li> <li><a href="#">La Naranja Mecánica</a></li> <li><a href="#">La Guerra de las Galaxias</a></li> <li><a href="#">Pulp Fiction</a></li> </ul>
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. 
Segunda entrega del resumen en los 
