Vue liste jQuery Mobile
- Page précédente Grille jQuery Mobile
- Page suivante Contenu de 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
<oldata-role="listview"
> <li><a href="#">Élément de liste</a></li> </ol> <uldata-role="listview"
> <li><a href="#">Élément de liste</a></li> </ul>
Pour ajouter des arrondis et des marges à la liste, utilisez l'attribut data-inset="true" :
Exemple
<ul data-role="listview" data-inset="true"
>
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>
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>
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>
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"
>
Plus d'exemples
- Liste en lecture seule
- Comment créer une liste sans lien (ni bouton, ni cliquable).
- Page précédente Grille jQuery Mobile
- Page suivante Contenu de liste jQuery Mobile