Utilisez jQuery pour ajouter des boutons et des icônes aux boutons des pages mobiles_jquery

Créer un bouton data-role=button
Ajoutez l'attribut data-role="button" aux éléments HTML. jQuery Mobile améliorera cet élément en un style de bouton. Le framework Jquery Mobile contient un ensemble d'icônes requises par les applications mobiles les plus couramment utilisées. Afin de réduire la taille du téléchargement, Jquery Mobile contient des images de sprite d'icônes blanches et ajoute automatiquement un cercle noir translucide après l'icône pour garantir que les images peuvent être affichées clairement. sur n’importe quelle couleur de fond.

Bouton de lien de style

Dans le bloc de contenu principal d'une page Web, vous pouvez styliser n'importe quel lien d'ancrage pour un bouton en ajoutant l'attribut data-role="button". Le framework améliorera les boutons de lien avec des méthodes de balisage et de liaison de classes. Par exemple, cette balise :

<a href="index.html" data-role="button">Link button</a>

REMARQUE : les styles tels que les liens des boutons sont identiques à la sélection visuelle du formulaire réel situé sous le bouton, mais il existe quelques différences importantes. Basé sur le bouton de lien, le bouton est un plug-in, qui utilise non seulement le plug-in de balise de bouton de base pour générer le style du bouton, de sorte que les méthodes du bouton de formulaire (activer, désactiver, actualiser) ne sont pas prises en charge. Si vous devez désactiver un bouton (ou un élément) basé sur un lien, il est possible d'appliquer une interface utilisateur de niveau de handicap à la personne handicapée elle-même en utilisant Javascript pour obtenir le même effet.

Version mini data-mini="true"

Pour une version plus compacte qui est utile dans les barres d'outils et les espaces restreints, ajoutez l'attribut data-mini="true" au bouton pour créer une mini version.

<a href="index.html" data-role="button" data-mini="true">Link button</a>

Ajouter une icône à l'icône de données du bouton
Le framework jQuery Mobile comprend un ensemble sélectionné d'icônes dont les applications mobiles ont généralement besoin. Pour minimiser la taille du téléchargement, jQuery Mobile contient un seul sprite d'icône blanche et ajoute automatiquement un cercle noir translucide derrière l'icône pour garantir qu'elle contraste bien avec n'importe quelle couleur d'arrière-plan.

Une icône peut être ajoutée à un bouton en ajoutant une propriété d'icône à l'ancre spécifiant les données d'icône à afficher. Par exemple, la balise suivante :

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

La version mini ajoute l'attribut data-mini="true"

Liste des styles d'icônes

jQuery Mobile est livré avec de nombreuses petites icônes de boutons, comme indiqué ci-dessous :

Flèche gauche : data-icon="arrow-l"
Flèche droite : data-icon="arrow-r"
Flèche vers le haut : data-icon="arrow-u"
Flèche vers le bas : data-icon="arrow-d"
Supprimer : data-icon="delete"
Ajouter : data-icon="Plus"
Réduire : data-icon="moins"
Vérifiez : data-icon="Check"
Équipement : data-icon="gear"
Transférer : data-icon="Forward"
Retour : data-icon="Retour"
Grille : data-icon="Grille"
Pentagramme : data-icon="Étoile"
Attention : data-icon="Alerte"
Informations : data-icon="info"
Page d'accueil : data-icon="home"
Recherche : data-icon="Recherche"

Données de positionnement des icônes-iconpos

Par défaut, toutes les icônes sont placées à gauche du texte du bouton. Cette valeur par défaut peut être remplacée en utilisant l'attribut data-iconpos pour définir le texte en haut, en bas, à droite et à gauche de l'icône. Par exemple, taguez :

<font color=#0000ff><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

Masquer le texte sur les images data-iconpos="notext"

Vous pouvez également créer un bouton icône et définir data-iconpos="notext". Le plugin Button masquera le texte à l'écran, mais l'utilisera comme attribut de titre de lien contextuel pour donner aux lecteurs d'écran et aux appareils prenant en charge les info-bulles. Par exemple, data-iconpos="right", data-iconpos="notext":

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

迷你和内联

迷你和内联属性可以被添加到产生更紧凑的按钮

自定义图标 data-icon="自定义值"

使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类，它的前缀是ui-icon- ，后面的是data-icon值。假如：有一个按钮 data-icon 属性的值为 myapp-email，即 data-icon=“ myapp-email”。那么生产的CSS类是：ui-icon-myapp-email。

然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性，请创建一个白色18x18像素的PNG-8图标，并且保存为Alpha透明度。

.ui-icon-myapp-email {
 background-image: url( "app-icon-email.png" );
}

这将创建标准分辨率的图标，但许多设备都有非常高的分辨率的显示器，就像iPhone 4的视网膜显示器。添加一个高清图标，创建一个图标，36X36像素（18像素大小完全相同的两倍），并添加第二个规则使用WebKit分钟装置像素比例：2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
 .ui-icon-myapp-email {
  background-image: url( "app-icon-email-highres.png" );
  background-size: 18px 18px;
 }
 ...more HD icon rules go here...
}