jQuery Mobile fournit un ensemble d'icônes qui rendront vos boutons look plus souhaitable.
Ajout d'icônes à jQuery mobile Boutons
Pour ajouter une icône à votre bouton, utilisez l' ui-icon de classe, et positionner l'icône avec une classe icône de position (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Remarque: Pour les autres boutons, comme des boutons dans les vues de la liste et les formes, vous devez utiliser l'attribut data-icon. Cela sera expliqué dans un chapitre ultérieur.
Ci-dessous nous avons énuméré quelques icônes disponibles que jQuery Mobile fournit:
| classe Icon | La description | Icône | Exemple |
|---|---|---|---|
| ui-icon-arrow-l | Flèche gauche | Essayez - le | |
| ui-icon-arrow-r | Flèche droite | Essayez - le | |
| ui-icon-info | Information | Essayez - le | |
| ui-icon-delete | Effacer | Essayez - le | |
| ui-icon-back | Arrière | Essayez - le | |
| ui-icon-audio | Haut-parleurs | Essayez - le | |
| ui-icon-lock | Cadenas | Essayez - le | |
| ui-icon-search | Chercher | Essayez - le | |
| ui-icon-alert | Alerte | Essayez - le | |
| ui-icon-grid | la grille | Essayez - le | |
| ui-icon-home | Accueil | Essayez - le |
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 .
positionnement des icônes
Vous pouvez spécifier l' une des quatre valeurs pour où l'icône doit être placé dans le bouton: top, right, bottom à left top, right, bottom en top, right, bottom ou à left .
Utilisez le ui-btn-icon classe pour spécifier la position:
Icône Position pour Lien Boutons
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
Essayez - le vous - même » Si vous ne spécifiez pas la position de l'icône pour les boutons de liaison, l'icône ne sera pas affichée.
Affichage seule l'icône
Pour afficher uniquement l'icône, utilisez "notext" en tant que valeur pour l' icône Position:
Exemple
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Essayez - le vous - même » Retrait du Cercle
Par défaut, toutes les icônes ont un cercle gris (disque) autour d'eux. Pour retirer le cercle, ajouter le "ui-nodisc-icon" classe à l'élément ou de son contenant:
Exemple
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
Essayez - le vous - même » Icônes Noir ou Blanc
Par défaut, toutes les icônes sont blancs. Pour changer la couleur de l' icône en noir, ajouter le "ui-alt-icon" à l'élément ou de son contenant:
Exemple
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
Essayez - le vous - même » Autres exemples
Ajouter le "ui-nodisc-icon" classe à un conteneur
Un exemple de la "ui-nodisc-icon" classe ajouté à un conteneur.
Ajouter le "ui-alt-icon" classe à un conteneur
Un exemple de la "ui-alt-icon" classe ajouté à un conteneur.