Vista de lista de jQuery Mobile

Vista de lista de jQuery Mobile

Las vistas de lista en jQuery Mobile son listas HTML estándar: listas ordenadas (<ol>) y listas no ordenadas (<ul>).

Para crear una lista, agregue la propiedad data-role="listview" a los elementos <ol> o <ul>. Para hacer que estos elementos sean clicables, especifique enlaces en cada elemento de lista (<li>):

Ejemplo

<ol data-role="listview">
  <li><a href="#">Elemento de lista</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Elemento de lista</a></li>
</ul>

Prueba personalmente

Si desea agregar esquinas redondeadas y márgenes a la lista, utilice la propiedad data-inset="true":

Ejemplo

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

Prueba personalmente

Consejo:Por defecto, los elementos de la lista se convierten automáticamente en botones (sin necesidad de data-role="button").

Separadores de lista

Los separadores de lista (List Dividers) se utilizan para organizar y combinar elementos en categorías/sectores.

Si desea definir los separadores de lista, agregue la propiedad data-role="list-divider" al elemento <li>:

Ejemplo

<ul data-role="listview">
 <li data-role="list-divider">Europa</li>
  <li><a href="#">Francia</a></li>
  <li><a href="#">Alemania</a></li>
</ul>

Prueba personalmente

Si su lista está en orden alfabético (por ejemplo, el directorio de teléfono), jQuery Mobile agrega separadores adecuados mediante la configuración de la propiedad data-autodividers="true" en los elementos <ol> o <ul>:

Ejemplo

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

Prueba personalmente

Consejo:La propiedad data-autodividers="true" crea separadores utilizando la primera letra en mayúscula del texto de los elementos de la lista.

Filtro de búsqueda

Si desea agregar una caja de búsqueda a la lista, utilice la propiedad data-filter="true":

Ejemplo

<ul data-role="listview" data-filter="true"</ul>

Prueba personalmente

Por defecto, el texto en el cuadro de búsqueda es "Filtrar elementos...".

Si desea modificar el texto predeterminado, utilice la propiedad data-filter-placeholder: }}

Ejemplo

<ul data-role="listview" data-filter="true" data-filter-placeholder="Buscar nombre">

Prueba personalmente

Más ejemplos

Lista de solo lectura
Cómo crear una lista sin enlaces (no es un botón, no se puede hacer clic).