Contenu de liste jQuery Mobile

Miniatures de liste jQuery Mobile

Pour les images de plus de 16x16px, ajoutez un élément <img> dans le lien.

jQuery Mobile ajustera automatiquement les images à 80x80px :

Exemple

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

Essayez-le vous-même

Utilisez le HTML standard pour remplir les listes informatives :

Exemple

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Navigateur web open source gratuit Google Chrome. Publié en 2008.</p>
    </a>
  </li>
</ul>

Essayez-le vous-même

Icônes de liste jQuery Mobile

Pour ajouter des icônes de 16x16px à votre liste, ajoutez l'attribut class="ui-li-icon" à l'élément <img> :

Exemple

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

Essayez-le vous-même

Bouton de séparation

Pour créer une liste déroulante avec une barre de séparation verticale, placez deux liens à l'intérieur de l'élément <li>.

jQuery Mobile ajoutera automatiquement un style d'icône bleue pour le deuxième lien, et le texte du lien (le cas échéant) sera affiché lorsque l'utilisateur glissera sur l'icône :

Exemple

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

Essayez-le vous-même

En ajoutant des pages et des dialogues, vous pouvez rendre les liens plus fonctionnels :

Exemple

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Télécharger le navigateur</a>
  </li>
</ul>

Essayez-le vous-même

Bulles de compte

Les bulles de compte sont utilisées pour afficher le nombre associé à une entrée de liste, par exemple les messages dans une boîte de réception :

Pour ajouter des bulles de compte, utilisez des éléments en ligne, par exemple <span>, et définissez l'attribut class "ui-li-count" avec un nombre :

Exemple

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

Essayez-le vous-même

Remarque :Pour afficher correctement le nombre dans le bulle de compte, une mise à jour programmée est nécessaire. Nous expliquerons cela dans le prochain chapitre.

Plus d'exemples

Changer l'icône de lien par défaut des éléments de liste
Comment définir différents icônes de lien pour les éléments de liste (la flèche vers la droite est le défaut).
Liste pliable
Comment créer une liste cachée et visible.
Plus de formats de contenu
Comment faire un calendrier.