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	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-top"> top </a>
<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:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext"> Recherche </a>

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"> utilisation cercle (par défaut) </a>
<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"> blanc </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon"> </a> Noir

Essayez »