jQuery Mobile Icônes de boutons
jQuery Mobile fournit un ensemble d'icônes qui rendent les boutons plus attrayants.
Ajouter des icônes aux boutons jQuery Mobile
Nous pouvons utiliser la classe ui-icon pour ajouter des icônes aux boutons, et utiliser la classe spécifiée pour définir la position du bouton.
<a href="../index.html" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
Remarque :Pour les boutons dans d'autres contextes, tels que les boutons dans les listes ou les formulaires, l'attribut data-icon est requis. Nous aborderons cela en détail dans les chapitres suivants.
Ci-dessous, nous listons quelques-unes des icônes disponibles fournies par jQuery Mobile :
| Classe de bouton | Description | Bouton | Exemple |
|---|---|---|---|
| ui-icon-arrow-l | Flèche gauche | Essayez-le vous-même | |
| ui-icon-arrow-r | Flèche droite | Essayez-le vous-même | |
| ui-icon-info | Info | Essayez-le vous-même | |
| ui-icon-delete | Delete | Essayez-le vous-même | |
| ui-icon-back | Retour | Essayez-le vous-même | |
| ui-icon-audio | Haut-parleur | Essayez-le vous-même | |
| ui-icon-lock | Cadenas | Essayez-le vous-même | |
| ui-icon-search | Rechercher | Essayez-le vous-même | |
| ui-icon-alert | Alerte | Essayez-le vous-même | |
| ui-icon-grid | Grille | Essayez-le vous-même | |
| ui-icon-home | Accueil | Essayez-le vous-même |
Pour la référence complète de toutes les icônes de bouton jQuery Mobile, veuillez consulter notreManuel de référence des icônes jQuery Mobile。
Positionnement des icônes
Vous pouvez également spécifier où l'icône est positionnée sur le bouton : en haut, à droite, en bas, à gauche.
Veuillez utiliser l'attribut ui-btn-icon pour spécifier la position :
Position de l'icône :
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Droite</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bas</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Gauche</a>
Essayez-le vous-même »
 |
Si vous ne spécifiez pas la position de l'icône du bouton, l'icône ne sera pas affichée. |
|---|
Afficher uniquement l'icône
Si vous souhaitez uniquement afficher l'icône, vous pouvez utiliser "notext" :
Exemple :
Essayez-le vous-même »
Supprimer le cercle
Par défaut, toutes les icônes ont un cercle gris. Si vous n'en avez pas besoin, vous pouvez utiliser la classe "ui-nodisc-icon" sur l'élément :
Exemple
<a href="../index.html" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Supprimer le cercle</a>
Essayez-le vous-même »
Boutons noirs et blancs
Par défaut, toutes les icônes sont blanches. Si vous devez changer la couleur de l'icône en noir, vous pouvez ajouter "ui-alt-icon" à l'élément :
Exemple
<a href="../index.html" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Noir</a>
Essayez-le vous-même »
Plus d’exemples
Exemple d'utilisation de la classe "ui-nodisc-icon".
Exemple d'utilisation de la classe "ui-alt-icon".