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.

Divisores Manuales con data-role

Con el atributo data-role="listdivider" debemos crear manualmente los elementos divisores:

<ul data-role="listview" data-inset="true" data-filter="true">
  <li data-role="list-divider">C</li>
  <li>Casablanca</li>
  <li>Charada</li>
  <li data-role="list-divider">D</li>
  <li>Dos Hombres y Un Destino</li>
  <li data-role="list-divider">E</li>
  <li>Espartaco</li>
  <li data-role="list-divider">G</li>
  <li>El Golpe</li>
  <li>La Guerra de las Galaxias</li>
  <li>Granujas a todo ritmo</li>
</ul>

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

Divisores Automáticos con data-autodividers

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

<ul data-role="listview" data-inset="true" data-autodividers="true">
  <li>Casablanca</li>
  <li>Charada</li>
  <li>Dos Hombres y Un Destino</li>
  <li>Espartaco</li>
  <li>El Golpe</li>
  <li>El Silencio de los Corderos</li>
  <li>El Padrino</li>
  <li>Granujas a todo ritmo</li>
  <li>La Naranja Mecánica</li>
  <li>La Guerra de las Galaxias</li>
  <li>Pulp Fiction</li>
</ul>

Consideraciones sobre el Orden

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

Personalizar el Selector de Divisores

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 funcionar. Si alguien lo consigue. Qué avise. :-D