jQuery mobile icônes de boutons
jQuery Mobile fournit un ensemble de boutons permet de regarder l'icône plus souhaitable.
Bouton pour ajouter des icônes à jQuery Mobile
Nous pouvons utiliser l'ui-icône de classe pour ajouter une icône du bouton, et le bouton peut être réglé en utilisant la classe spécifiée.
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
Remarque: Sur les autres boutons de manière, comme une liste ou une forme de boutons utilisent des données-icon attribut. Dans la section suivante, nous allons présenter spécifique.
Ci-dessous, nous énumérons quelques-unes des icônes disponibles jQuery Mobile fournit:
classe Button | description | Bouton poussoir | Exemples |
---|---|---|---|
ui-icon-arrow-l | Flèche gauche | essayer | |
ui-icon-arrow-r | flèche droite | essayer | |
ui-icon-info | Informations | essayer | |
ui-icon-delete | effacer | essayer | |
ui-icon-back | retraite | essayer | |
ui-icon-audio | haut-parleur | essayer | |
ui-icon-lock | cadenasser | essayer | |
ui-icon-recherche | recherche | essayer | |
ui-icon-alerte | avertissement | essayer | |
ui-icon-grille | engrener | essayer | |
ui-icon-home | maison | essayer |
Pour un manuel de référence complet pour toutes les icônes jQuery Mobile, visitez notre jQuery Mobile icon Manuel de référence .
Lieu icon
Vous pouvez également spécifier une icône placée dans le bouton que de position: le haut (en haut), côté droit (à droite), en bas (en bas), la gauche (à gauche).
S'il vous plaît utiliser l'icône-ui-btn attribut pour spécifier l'emplacement:
Icône Lieu:
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right"> </a> côté droit
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom"> </a> bas
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> </a> côté gauche
Essayez »
Si vous ne spécifiez pas l'emplacement de l'image du bouton, l'icône ne sera pas affichée. |
Afficher seulement icon
Si vous voulez afficher l'icône, vous pouvez utiliser le "notext":
exemple:
Essayez »
Retirer le cercle
Par défaut, toutes les icônes ont un cercle gris. Si vous ne avez pas besoin, vous pouvez utiliser la catégorie élément "ui-NODISC-icon":
Exemples
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon"> retirer </a> cercle
Essayez »
Noir, bouton blanc
Par défaut, toutes les icônes sont blancs. Si vous avez besoin de changer la couleur de l'icône est noire, vous pouvez ajouter "ui-alt-icon" dans les éléments:
Exemples
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon"> </a> Noir
Essayez »
D'autres exemples
Ajouter "ui-NODISC-icon" classe au conteneur
Exemple de classe "ui-NODISC-icon".
Ajouter "ui-alt-icon" classe au conteneur
Exemple de classe "ui-alt-icon".