Uso de listview en Jquery Mobile

En esta ocasión vamos a ver como manejar listviews(listas) con Jquery Mobile, respecto a este elemento existen muchas posibilidades para adaptarlo a lo que necesites, a continuación algunos ejemplo de uso ... 

Listview básico. Para crear el componente -> data-role="listview" ...

<ul data-role="listview">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>

Listview básico con links ...

<ul data-role="listview">
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
</ul>

Listview básico con links agrupados. Para crear este efecto de agrupado hay que utilizar el atributo data-inset="true" ...

<ul data-role="listview" data-inset="true">
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
</ul>

Listview con filtrado de datos. Para ello es necesario usar el atributo data-filter="true"...

<ul data-role="listview" data-filter="true" data-filter-placeholder="Buscar número ..." data-inset="true">
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
<li><a href="#">Cinco</a></li>
<li><a href="#">Seis</a></li>
</ul>

Listview con filtrado de datos con items ocultos. Los items de la lista sólo serán mostrados cuando se introduzcan coincidencias, para crear este efecto -> data-filter-reveal="true"...
 

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Buscar número ..." data-inset="true">
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
<li><a href="#">Cinco</a></li>
<li><a href="#">Seis</a></li>
</ul>

Listview con divisisores, para ello indicar un tema distinto para distinguir la división -> data-divider-theme="e" e indicar que elemento li será el que divida la lista -> data-role="list-divider"...

<ul data-role="listview" data-inset="true" data-divider-theme="e">
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li data-role="list-divider">division</li>
<li><a href="#">Cuatro</a></li>
<li><a href="#">Cinco</a></li>
<li><a href="#">Seis</a></li>
</ul>