Listas Ordenadas con jQuery Mobile

Aunque en los ejemplos que hemos visto hasta ahora con jQuery Mobile (lista de elementos, filtrar elementos, listas anidadas,…) las listas utilizadas no tenían ningún orden, con jQuery Mobile podemos crear listas ordenadas para presentar el contenido.

Estructura de Lista Desordenada

Para poder crear listas ordenadas con jQuery Mobile simplemente tenemos que recurrir a la estructura HTML de las listas ordenadas. Es decir, al elemento OL.

De esta forma, si una lista desordenada con jQuery Mobile era:

<ul data-role="listview" data-inset="true">
  ...
</ul>

Estructura de Lista Ordenada

Una lista ordenada con jQuery Mobile será:

<ol data-role="listview" data-inset="true">
  ...
</ol>

Recuerda que las listas en jQuery Mobile se demarcan con el atributo data-role al cual le asignamos el valor “listview”.

Ejemplo Completo

Quedándonos el código fuente de una lista ordenada con jQuery Mobile de la siguiente forma:

<ol data-role="listview" data-inset="true" data-filter="true">
  <li><a href="#">Espartaco</a></li>
  <li><a href="#">La Naranja Mecánica</a></li>
  <li><a href="#">El Padrino</a></li>
  <li><a href="#">Sin Perdón</a></li>
  <li><a href="#">Dos Hombres y Un Destino</a></li>
</ol>

De esta forma tan sencilla hemos conseguido crear listas ordenadas con jQuery Mobile.