Vue liste jQuery Mobile

Vue liste jQuery Mobile

Les vues de liste de jQuery Mobile sont des listes HTML standard : listes ordonnées (<ol>) et listes non ordonnées (<ul>).

Pour créer une liste, ajoutez l'attribut data-role="listview" aux éléments <ol> ou <ul>. Pour rendre ces éléments cliquables, définissez un lien dans chaque élément de liste (<li>) :

Exemple

<ol data-role="listview">
  <li><a href="#">Élément de liste</a></li>
</ol>
<ul data-role="listview">
  <li><a href="#">Élément de liste</a></li>
</ul>

Essayez-le vous-même

Pour ajouter des arrondis et des marges à la liste, utilisez l'attribut data-inset="true" :

Exemple

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

Essayez-le vous-même

Astuce :Par défaut, les éléments de la liste sont automatiquement convertis en boutons (sans nécessiter data-role="button").

Séparateurs de liste

Les séparateurs de liste (List Dividers) servent à organiser et regrouper les éléments en catégories/séctions.

Pour définir les séparateurs de liste, ajoutez l'attribut data-role="list-divider" à l'élément <li> :

Exemple

<ul data-role="listview">
 <li data-role="list-divider">Europe</li>
  <li><a href="#">France</a></li>
  <li><a href="#">Allemagne</a></li>
</ul>

Essayez-le vous-même

Si votre liste est en ordre alphabétique (par exemple, un carnet d'adresses), jQuery Mobile ajoute automatiquement les séparateurs appropriés en définissant l'attribut data-autodividers="true" sur les éléments <ol> ou <ul> :

Exemple

<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>

Essayez-le vous-même

Astuce :L'attribut data-autodividers="true" crée des séparateurs en mettant en majuscule la première lettre des textes des éléments de la liste.

Filtre de recherche

Pour ajouter une zone de recherche dans la liste, utilisez l'attribut data-filter="true":

Exemple

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

Essayez-le vous-même

Par défaut, le texte dans la zone de recherche est "Filtrer les éléments...".

Pour modifier le texte par défaut, utilisez l'attribut data-filter-placeholder :

Exemple

<ul data-role="listview" data-filter="true" data-filter-placeholder="Recherche de nom">

Essayez-le vous-même

Plus d'exemples

Liste en lecture seule
Comment créer une liste sans lien (ni bouton, ni cliquable).