Contenido de lista de jQuery Mobile

Miniaturas de lista de jQuery Mobile

Para imágenes mayores de 16x16px, agregue un elemento <img> en el enlace.

jQuery Mobile ajustará automáticamente las imágenes a 80x80px:

Ejemplo

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

Prueba personalmente

Utilice HTML estándar para rellenar la lista con información:

Ejemplo

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Navegador web gratuito y de código abierto Google Chrome. Publicado en 2008.</p>
    </a>
  </li>
</ul>

Prueba personalmente

Íconos de lista de jQuery Mobile

Si desea agregar un ícono de 16x16px a su lista, agregue la propiedad class="ui-li-icon" al elemento <img>:

Ejemplo

<li><a href="#"><img src="us.png" alt="EE. UU" class="ui-li-icon">EE. UU.</a></li>

Prueba personalmente

Botón de división

Si desea crear una lista dividida con una barra lateral vertical, coloque dos enlaces dentro del elemento <li>.

jQuery Mobile agregará automáticamente el estilo del ícono de flecha azul para el segundo enlace, y el texto del enlace (si lo hay) se mostrará cuando el usuario deslice sobre el ícono:

Ejemplo

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Texto Alguno</a>
  </li>
</ul>

Prueba personalmente

Agregando páginas y diálogos, se puede hacer que la función del enlace sea más fuerte:

Ejemplo

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Descargar navegador</a>
  </li>
</ul>

Prueba personalmente

Espuma de cuenta

La espuma de cuenta se utiliza para mostrar el número relacionado con el elemento de la lista, por ejemplo, los mensajes en el correo electrónico:

Si desea agregar una espuma de cuenta, utilice un elemento en línea, como <span>, configure la propiedad de clase "ui-li-count" y agregue el número:

Ejemplo

<ul data-role="listview">
  <li><a href="#">Bandeja de entrada<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Enviado<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Basura<span class="ui-li-count">7</span></a></li>
</ul>

Prueba personalmente

Notas:Para mostrar el número correcto en el burbuja de cuenta, debe actualizarse programáticamente. Hablaremos de esto en el siguiente capítulo.

Más ejemplos

Cambiar el ícono de enlace predeterminado de elementos de lista
Cómo establecer diferentes íconos de enlace para elementos de lista (la flecha hacia la derecha es la predeterminada).
Lista plegable
Cómo crear una lista oculta y visible.
Más formatos de contenido
Cómo hacer un calendario.