jQuery Liste mobile Icônes
L'icône par défaut pour chaque élément de liste contenant un lien est "carat-r" (flèche droite). Pour changer cela à une autre icône, utilisez les data-icon attribut sur l'élément de la liste que vous souhaitez modifier:
Exemple
<ul data-role="listview">
<li><a href="#">Default is right
arrow</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" va supprimer l'icône.
Pour une référence complète de toutes les icônes de boutons jQuery Mobile, s'il vous plaît visitez notre jQuery Icônes mobiles de référence .
16x16 Icônes
Pour ajouter une icône de 16x16px standard à votre liste, ajoutez un <img> élément dans le lien avec une classe de "ui-li-icon":
Exemple
<ul data-role="listview">
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon" >USA</a></li>
</ul>
Essayez - le vous - même » jQuery Liste mobile Miniatures
Pour des images plus grandes que 16x16px, ajoutez un <img> élément à l' intérieur d' un élément de la liste en tant que premier élément enfant (sans nom de la classe).
jQuery Mobile échelle automatiquement l'image à 80x80px :
Exemple
<ul data-role="listview">
<li><a href="#"><img src="chrome.png"></a></li>
</ul>
Essayez - le vous - même » Utilisez HTML standard pour remplir la liste des informations:
Exemple
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free,
open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
Essayez - le vous - même » Boutons de split
Pour créer une liste de partage avec une barre de séparation verticale, placez deux liens à l' intérieur du <li> élément.
jQuery Mobile placera automatiquement le deuxième lien sur le côté droit de la liste avec un droit de arrow-icon . Et le texte à l'intérieur du lien (le cas échéant) sera affiché quand un vol stationnaire de l'utilisateur 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 » Permet d'ajouter quelques pages et des dialogues pour rendre les liens plus fonctionnels:
Exemple
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download"
data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>
<div data-role="page" id="download" data-dialog="true">
Essayez - le vous - même » Count Bubbles
bulles de comptage sont utilisés pour afficher les numéros associés à des éléments de liste, tels que des messages dans une boîte aux lettres:
Pour ajouter des bulles de comptage, utiliser un élément en ligne, tels que <span> , avec la classe "ui-li-count" et ajoutez un numéro:
Exemple
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count" >25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count" >432</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 le nombre correct dans une bulle de comptage, il doit être mis à jour par programme. Cela sera expliqué dans un chapitre ultérieur.
Autres exemples
Listes Popup
Comment créer une liste déroulante.
listes pliables
Comment créer des listes qui se cachent et montrent le contenu.
Listes popup pliables
Comment créer une liste déroulante pliable.
Largeur complète des listes pliables
Utilisation de la data-inset="false" attribut sur "collapsibles/collapsible set" pour permettre une largeur listview complète.
Plus de formatage de contenu
Comment faire un calendrier.