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.
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>
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-roleal cual le asignamos el valor «listview».
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.
