jQuery Mobile Lista de los iconos
El icono predeterminado para cada elemento de la lista que contiene un enlace es "carat-r" (flecha derecha). Para cambiar esto a otro icono, utilice el data-icon de atributos en el elemento de la lista que desea modificar:
Ejemplo
<ul data-role="listview">
<li><a href="#">Default is right
arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li
data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li
data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
Inténtalo tú mismo " data-icon="false" se eliminará el icono.
Para una referencia completa de todos los iconos de los botones de jQuery Mobile, por favor vaya a nuestro móvil iconos jQuery referencia .
16x16 Iconos
Para añadir un icono 16x16px estándar a su lista, agregar un <img> elemento dentro de la relación con una clase de "ui-li-icono":
Ejemplo
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Inténtalo tú mismo " Lista de jQuery Mobile miniaturas
Para las imágenes más grandes que 16x16px, agregar un <img> elemento dentro de un elemento de la lista como el primer elemento secundario (sin nombre de la clase).
jQuery Mobile automáticamente la escala de la imagen para 80x80px :
Ejemplo
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Inténtalo tú mismo " Usar HTML estándar para llenar la lista con la información:
Ejemplo
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Inténtalo tú mismo " Botones de división
Para crear una lista dividida con una barra de división vertical, colocar dos enlaces dentro del <li> elemento.
jQuery Mobile colocará automáticamente el segundo enlace en la parte derecha de la lista con un derecho arrow-icon . Y se mostrará el texto dentro del enlace (si lo hay) cuando un usuario vuelo estacionario sobre el icono:
Ejemplo
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some
Text</a>
</li>
</ul>
Inténtalo tú mismo " Vamos a añadir algunas páginas y cuadros de diálogo para que los vínculos sean más funcionales:
Ejemplo
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
Inténtalo tú mismo " contar las burbujas
burbujas de recuento, se muestran los números asociados con elementos de la lista, como los mensajes de un buzón:
Para agregar burbujas de recuento, utilizar un elemento en línea, tales como <span> , con la clase "ui-li-count" y añadir un número:
Ejemplo
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count" >7</span></a></li>
</ul>
Inténtalo tú mismo " Nota: Para mostrar el número correcto en una burbuja de recuento, se debe actualizar mediante programación. Esto será explicado en un capítulo posterior.
Más ejemplos
listas desplegables
Cómo crear una lista emergente.
listas plegables
Cómo crear listas que ocultar y mostrar el contenido.
Listas desplegables plegables
Cómo crear una lista emergente plegable.
Ancho completo listas plegables
Utilizando la data-inset="false" atributo de "collapsibles/collapsible set" para permitir una vista de lista de ancho total.
Formato más contenido
Cómo hacer un calendario.