jQuery Mobile Contenu de la liste
jQuery Mobile Icônes de liste
Par défaut, chaque élément de liste contiendra une icône de flèche "carat-r" (flèche vers la droite). Pour modifier cette icône, vous pouvez utiliser l'attribut data-icon :
Exemple
<li><a href="#">Par défaut, la flèche est à droite</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>
Essayez-le vous-même »
 |
data-icon="false" retirera l'icône. |
|---|
Pour un ensemble plus complet d'icônes de boutons jQuery Mobile, veuillez consulter notrejQuery Mobile Manuel de référence des icônes。
Icônes 16x16
Si vous souhaitez ajouter des icônes standard de 16x16px à votre liste, vous pouvez ajouter un élément <img> dans l'élément de liste et utiliser la classe "ui-li-icon" :
Exemple
<li><a href="../index.html"><img src="us.png.html" alt="États-Unis" class="ui-li-icon">États-Unis</a></li>
</ul>
Essayez-le vous-même »
Vignettes de liste jQuery Mobile
Pour les images plus grandes que 16x16px, ajoutez un élément <img> dans le lien.
jQuery Mobile redimensionnera automatiquement les images à 80x80px :
Exemple
<li><a href="../index.html"><img src="chrome.png.html"></a></li>
</ul>
Essayez-le vous-même »
Utilisez le HTML standard pour ajouter des informations de liste :
Exemple
<li>
<a href="../index.html">
<img src="chrome.png.html">
<h2>Google Chrome</h2>
<p>Google Chrome est un navigateur web gratuit et open source. Sorti en 2008.</p>
</a>
</li>
</ul>
Essayez-le vous-même »
jQuery Mobile Icônes de liste
Utilisez class="ui-li-icon" sur l'élément <img> de la liste pour ajouter des icônes de 16x16px :
Exemple
Essayez-le vous-même »
Boutons divisés
Dans les listes jQuery Mobile, il est parfois nécessaire d'effectuer deux opérations différentes sur le contenu d'une option. Dans ce cas, vous devez scinder le bouton de lien dans l'option. La méthode pour réaliser la scission est d'ajouter un autre élément <a> à l'intérieur de l'élément <li>, et l'effet de scission peut être implémenté sur la page.
jQuery Mobile définira automatiquement le deuxième lien comme une icône de flèche bleue. Le texte du lien de l'icône (le cas échéant) sera affiché lorsque l'utilisateur survole l'icône avec la souris :
Exemple
<li>
<a href="../index.html"><img src="chrome.png.html"></a>
<a href="../index.html">Un Texte</a>
</li>
</ul>
Essayez-le vous-même »
Ajoutez quelques pages et boîtes de dialogue pour enrichir la fonctionnalité des liens :
Exemple
<li>
<a href="../index.html"><img src="chrome.png.html"></a>
<a href="../index.html" data-rel="dialog">Télécharger le navigateur</a>
</li>
</ul>
Essayez-le vous-même »
Bulles de comptage
Les bulles de comptage sont utilisées pour afficher des nombres associés à des éléments de liste, comme les e-mails dans une boîte aux lettres :
Pour ajouter des bulles de comptage, utilisez un élément en ligne tel que <span>, définissez l'attribut class "ui-li-count" et ajoutez le nombre :
Exemple
<li><a href="../index.html">Inbox<spanclass="ui-li-count">25</span></a></li>
<li><a href="../index.html">Boîte d'envoi<spanclass="ui-li-count">432</span></a></li>
<li><a href="../index.html">Corbeille<spanclass="ui-li-count">7</span></a></li>
</ul>
Essayez-le vous-même »
Remarque :Pour afficher correctement une bulle de comptage, la méthode de programmation doit être modifiée. Cela sera expliqué dans les chapitres suivants.
Plus d’exemples
Comment créer une liste pop-up
Comment définir l'icône de lien par défaut des éléments de liste (par défaut, il s'agit d'une flèche vers la droite).
Comment créer une liste pop-up repliable.
Comment créer une liste pouvant être affichée/masquée.
Comment créer un calendrier.