Les applications mobiles sont construites sur la simplicité de taraudage choses que vous voulez afficher.
Création d'un bouton dans jQuery Mobile
Un bouton dans jQuery Mobile peut être créé de trois manières:
- Utilisation de la <input> élément
- En utilisant le <button> élément avec class="ui-btn"
- Utilisation du <a> élément avec class="ui-btn"
Les boutons de jQuery Mobile sont automatiquement décorées, ce qui les rend attrayant et utilisable sur les deux appareils mobiles et les ordinateurs de bureau. Nous vous recommandons d' utiliser le <a> élément avec class="ui-btn" pour lier entre les pages, et <input> ou <button> éléments pour la soumission du formulaire.
Note: Avant la version 1.4, nous avons utilisé le data-role="button" attribut pour créer un bouton dans jQuery Mobile. Au 1.4, les cadres des classes utilisation de CSS à boutons de style (sauf pour <input> boutons).
Boutons de navigation
Pour créer un lien entre les pages par des boutons, utilisez le <a> élément avec class="ui-btn" :
Boutons groupé
jQuery Mobile fournit un moyen facile pour regrouper les boutons en même temps.
Utilisez le data-role="controlgroup" attribut avec data-type="horizontal|vertical" dans un élément conteneur, pour spécifier si aux boutons de groupe horizontalement ou verticalement:
Exemple
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Essayez - le vous - même » Par défaut, les boutons groupés sont regroupés verticalement sans marges et l'espace entre eux. Et seul le premier et le dernier bouton a des coins arrondis, ce qui crée une belle apparence lorsqu'ils sont regroupés.
Boutons Retour
Pour créer un bouton Retour, utilisez les data-rel="back" attribut (Note: ceci va ignorer de l'ancre href valeur):
Inline Boutons
Par défaut, les boutons prennent toute la largeur de l'écran. Si vous voulez un bouton qui est aussi large que son contenu, ou si vous voulez deux ou plusieurs boutons à apparaître côte à côte, ajoutez le "ui-btn-inline" classe:
Exemple
<a href="#pagetwo" class="ui-btn ui-btn-inline" >Go
to Page Two</a>
Essayez - le vous - même » Plus de classes CSS pour le lien Boutons
| Classe | La description | Exemple |
|---|---|---|
| ui-btn-b | Change la couleur du bouton à un fond noir avec du texte blanc (par défaut fond gris avec du texte noir). | Essayez - le |
| ui-corner-all | Ajoute des coins arrondis à la touche | Essayez - le |
| ui-mini | Rend le petit bouton | Essayez - le |
| ui-shadow | Ajoute des ombres sur le bouton | Essayez - le |
Si vous souhaitez utiliser plus d'une classe, séparer chaque classe avec un espace, comme: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
Par défaut, <input> boutons ont l' ombre et des coins arrondis. Le <a> et le <button> élément ne fonctionne pas.
Pour une référence complète des classes CSS pour les styles courants, consultez notre jQuery Mobile CSS Classes de référence .
Le chapitre suivant montre comment attacher des icônes à vos boutons.