jQuery Mobile Vue liste




jQuery Mobile Vue liste

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

Les vues de liste sont une fonctionnalité puissante de jQuery Mobile. Elles rendent les listes standard non ordonnées ou ordonnées plus polyvalentes. Pour l'appliquer, ajoutez l'attribut data-role="listview" à la balise ul ou ol. Ajoutez un lien dans chaque élément (<li>) sur lequel les utilisateurs peuvent cliquer :

Exemple

<ol data-role="listview">
<li><a href="../index.html">Élément de liste m</a></li>
</ol>

<ul data-role="listview">
<li><a href="../index.html">Élément de liste</a></li>
</ul>

Essayez-le vous-même »

Les coins arrondis et les bords du style de liste sont définis à l'aide de l'attribut data-inset="true" :

Exemple

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

Essayez-le vous-même »

lamp Par défaut, le lien dans un élément de liste devient automatiquement un bouton (aucun data-role="button" n'est nécessaire).


Séparateurs de liste

Les éléments de liste peuvent également être convertis en séparateurs de liste afin d'organiser la liste et de regrouper les éléments de liste.

Pour spécifier un séparateur de liste, ajoutez simplement l'attribut data-role="list-divider" à l'élément <li> d'un élément de liste :

Exemple

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

Essayez-le vous-même »

Si vous avez une liste triée par ordre alphabétique (par exemple un annuaire téléphonique), vous pouvez la configurer pour générer automatiquement des séparateurs d'éléments via l'attribut data-autodividers="true" sur l'élément <ol> ou <ul> :

Exemple

<ul data-role="listview" data-autodividers="true">
  <li><a href="../index.html">Adele</a></li>
  <li><a href="../index.html">Agnes</a></li>
  <li><a href="../index.html">Billy</a></li>
  <li><a href="../index.html">Calvin</a></li>
  ...
</ul>

Essayez-le vous-même »

lamp data-autodividers="true" peut être configuré pour générer automatiquement des séparateurs d'éléments. Par défaut, le texte du séparateur créé est la première lettre majuscule du texte de l'élément de liste.

实例

Plus d’exemples


Comment créer une liste sans liens (elle ne sera pas un bouton et ne sera pas cliquable).


Comment insérer des panneaux dans une liste

Autres extensions