Boutons jQuery Mobile

Les applications mobiles sont construites sur la commodité des opérations de tactile.

Création de boutons dans jQuery Mobile

Les boutons de jQuery Mobile peuvent être créés de trois manières :

  • L'élément <button>
  • L'élément <input>
  • L'élément <a> utilisant data-role="button"

<button>

<button> Bouton </button>

Essayez-le vous-même

<input>

<input type="button" value="Bouton">

Essayez-le vous-même

<a>

<a href="#" data-role="button">Bouton</a>

Essayez-le vous-même

Astuce :Les boutons de jQuery Mobile obtiennent automatiquement des styles, ce qui améliore leur interactivité et leur accessibilité sur les appareils mobiles. Nous vous recommandons d'utiliser l'élément <a> avec data-role="button" pour créer des liens entre les pages, tandis que les éléments <input> ou <button> sont utilisés pour soumettre des formulaires.

Boutons de navigation

Pour lier des pages via des boutons, utilisez l'élément <a> avec data-role="button" :

Exemple

<a href="#pagetwo" data-role="button">Aller à la page deux</a>

Essayez-le vous-même

Bouton en ligne

Par défaut, le bouton occupe toute la largeur de l'écran. Si vous souhaitez que le bouton s'adapte à son contenu ou si vous souhaitez afficher deux ou plusieurs boutons côte à côte, ajoutez data-inline="true" :

Exemple

<a href="#pagetwo" data-role="button" data-inline="true">Aller à la page deux</a>

Essayez-le vous-même

Boutons combinés

jQuery Mobile fournit une méthode simple pour regrouper les boutons.

Utilisez l'attribut data-role="controlgroup" avec data-type="horizontal|vertical" pour regrouper les boutons en horizontal ou en vertical :

Exemple

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Bouton 1</a>
  <a href="#anylink" data-role="button">Bouton 2</a>
  <a href="#anylink" data-role="button">Bouton 3</a>
</div>

Essayez-le vous-même

Astuce :Par défaut, les boutons combinés sont groupés verticalement, sans marge ni espace entre eux. De plus, seuls le premier et le dernier bouton ont des coins arrondis, créant ainsi un aspect joli une fois combinés.

Bouton retour

Pour créer un bouton retour, utilisez l'attribut data-rel="back" (le href de l'ancre sera ignoré) :

Exemple

<a href="#" data-role="button" data-rel="back">Retour</a>

Essayez-le vous-même

Plus couramment utilisé pour les attributs data-* des boutons

Caractéristique Valeur Description Exemple
data-corners true | false Détermine si le bouton a des coins arrondis. Test
data-mini true | false Détermine si le bouton est de petite taille. Test
data-shadow true | false Détermine si le bouton a une ombre. Test

Pour obtenir des informations complètes sur les attributs data-* de jQuery Mobile, veuillez visiter notre Manuel de référence des attributs jQuery Mobile Data.

La prochaine section montre comment ajouter une icône à un bouton.