jQuery Mobile liste contenu
jQuery Liste mobile icon
Par défaut, chaque élément de la liste contiendra une icône de flèche "carat-r" (flèche droite). Si vous voulez changer cette icône peut utiliser l'attribut data-icon:
Exemples
<Li> <a href="#"> par défaut est la flèche droite </a> </ li>
<Li data-icon = "plus"> <a href="#"> données-icon = "plus" </a> </ li>
<Li data-icon = "moins"> <a href="#"> données-icon = "moins" </a> </ li>
<Li data-icon = "supprimer"> <a href="#"> données-icon = "supprimer" </a> </ li>
<Li data-icon = "location"> <a href="#"> données-icon = "emplacement" </a> </ li>
<Li data-icon = "false"> <a href="#"> données-icon = "false" </a> </ li>
</ Ul>
Essayez »
 | data-icon = "false" va supprimer l'icône. |
|---|
A plus complète jQuery mobile icônes, s'il vous plaît visitez notre jQuery Mobile icon Manuel de référence .
16x16 icon
Si vous voulez ajouter à votre liste de critères de l'icône, vous pouvez ajouter l'élément <img> dans la liste des éléments et utiliser la catégorie "ui-li-icon":
Exemples
<Li> <a href="#"> <img src = "us.png" alt = "USA" class = "ui-li-icon"> USA </a> </ li>
</ Ul>
Essayez »
Liste jQuery Mobile thumbnail
Une image plus grande que 16x16px, ajouter l'élément <img> dans le lien.
jQuery Mobile sera redimensionne automatiquement l'image pour 80x80px:
Utilisez HTML standard pour ajouter une liste d'informations:
Exemples
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>
</a>
</li>
</ul>
Essayez »
jQuery Liste mobile icon
Dans la liste des élément <img> utilise class = "ui-li-icône" Ajouter 16x16px icône:
bouton de Split
JQuery Mobile dans la liste, il est parfois nécessaire de faire deux options différentes pour le contenu de l'opération, puis, le besoin d'options lien bouton segmentation. La méthode de segmentation est de parvenir à <li> pour ajouter un élément <a>, il peut obtenir l'effet de diviser la page.
jQuery Mobile définit automatiquement la flèche bleue deuxième icône de lien, l'icône est affichée lorsque le texte du lien (le cas échéant) dans l'utilisateur survole l'icône:
Exemples
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#">Some Text</a>
</li>
</ul>
Essayez »
Ajouter quelques pages et boîtes de dialogue pour faire le lien plus riche en fonctionnalités:
Exemples
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-rel="dialog">下载浏览器</a>
</li>
</ul>
Essayez »
Bubble numérique
numéros de bulles sont utilisés pour afficher la liste numéro associé élément, comme une boîte aux lettres:
Pour ajouter des numéros de bulles, en utilisant les éléments en ligne comme <span>, définissez l'attribut class "ui-li-count" et ajouter les numéros:
Exemples
<li><a href="#">收件箱<span class="ui-li-count" >25</span></a></li>
<li><a href="#">发件箱<span class="ui-li-count" >432</span></a></li>
<li><a href="#">垃圾箱<span class="ui-li-count" >7</span></a></li>
</ul>
Essayez »
Remarque: L'affichage correct d'une bulle numérique, vous devez modifier la programmation. Cela sera expliqué dans les chapitres suivants.
D'autres exemples
Liste de Pop
Comment créer une liste de pop
Modifier la liste par défaut Icône Lien articles
Comment définir les éléments de la liste lien par défaut de l'icône (par défaut flèche droite).
Liste des pop Pliable
Comment créer une liste pliable de la pop.
Liste pliable
Comment créer une liste d'affichage / masquage.