Icône du bouton jQuery Mobile

jQuery Mobile fournit un ensemble d'icônes qui rendent les boutons plus attrayants.

Ajouter une icône au bouton jQuery Mobile

Nous pouvons utiliser la classe ui-icon pour ajouter l'icône au bouton et utiliser la classe spécifiée pour définir la position du bouton.

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Remarque : Sur les boutons d'une autre manière, tels que les boutons dans les listes ou les formulaires, vous devez utiliser l'attribut data-icon. Nous le présenterons en détail dans les chapitres suivants.

Ci-dessous, nous répertorions certaines des icônes disponibles fournies par jQuery Mobile :

Pour un manuel de référence complet de toutes les icônes de boutons jQuery Mobile, visitez notre manuel de référence des icônes jQuery Mobile.

Positionner l'icône

Vous pouvez également préciser où l'icône est positionnée sur le bouton : haut, droite, bas, gauche .

Veuillez utiliser l'attribut ui-btn-icon pour spécifier la position :

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
<a href="#anylink"  class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a>

Classe de bouton	Description	Bouton	Instance
ui-icône-flèche-l	Flèche gauche		Essayez-le
ui-icon-arrow-r	Flèche droite		Essayez-le
ui-icon-delete	Supprimer		Essayez-le
ui-icon-back	Retour	>ui-icon-audio	Haut-parleur
ui-icon-lock	cadenas	-recherche
Essayez-le		ui-icon-alert
Essayez-le		ui-icon-home

	如果你未指定按钮图片的位置，图标将不显示。

Afficher uniquement les icônes

Si vous souhaitez afficher uniquement les icônes, vous pouvez utiliser "notext":

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

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" dans votre élément :

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left">使用圆圈 (默认)</a>

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left ui-nodisc-icon">去掉圆圈</a>

Boutons noir et blanc

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 :

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left">白色</a>

<a href="#anylink" class="ui-btn ui-icon-search  ui-btn-icon-left ui-alt-icon">黑色</a>

Ajouter au conteneur La classe "ui-nodisc-icon"
utilise une instance de la classe "ui-nodisc-icon".

Ajouter au conteneur La classe "ui-alt-icon"
utilise une instance de la classe "ui-alt-icon".