Latest web development tutorials

Bouton jQuery Mobile

Les applications mobiles sont construites sur un simple clic de choses que vous voulez afficher.





Créer un bouton dans jQuery Mobile

Dans jQuery Mobile, le bouton peut être créé de trois manières:

  • Utiliser élément <button>
  • Utiliser élément <input>
  • Utilisez <a> éléments avec data-role = "button" de

<Button>

<button>按钮</button>

Essayez »

<Entrée>

<input type="button" value="按钮">

Essayez »

<a>

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

Essayez »

lampe Dans jQuery Mobile, le bouton sera automatiquement coiffage, les rendre plus attrayants et la disponibilité sur les appareils mobiles. Nous vous recommandons d' utiliser des éléments <a> avec data-role = "button" du lien, utilisez la balise <input> ou <> élément entre les pages forment la soumission.


Les boutons de navigation

Pour via le lien du bouton entre les pages, utilisez <a> éléments avec data-role = "button" propriété:

Exemples

< a href="#pagetwo" data-role="button" >访问第二个页面</a>

Essayez »


bouton Inline

Par défaut, le bouton occupe toute la largeur de l'écran. Si vous voulez un contenu aussi large comme un bouton, ou si vous souhaitez afficher deux ou plusieurs boutons côte à côte, ajoutez les données-inline = "true":

Exemples

<a href="#pagetwo" data-role="button" data-inline="true" >访问第二个页面</a>

Essayez »


Une combinaison de touches

jQuery Mobile fournit un moyen simple de combiner un bouton.

S'il vous plaît mettre data-role = "controlgroup" attributs et type de données = "horizontal | vertical" sont utilisés ensemble pour spécifier si des combinaisons horizontales ou verticales de boutons:

Exemples

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

Essayez »

lampe Par défaut, les boutons sont une combinaison de composition verticale, pas de marge et de l'espace entre eux. Et seuls les premiers et derniers boutons sont arrondis, de sorte que quand ils sont combinés ensemble pour créer un beau look.


bouton Précédent

Pour créer un bouton Retour, utiliser les données-rel = propriété "back" (qui ignore la valeur de href d'ancrage):

Exemples

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

Essayez »


Plus de liens occurrence de bouton

catégorie description Exemples
ui-btn-b Modifier la couleur des boutons est noir, la police est blanche (fond gris par défaut, la police noire). essayer
ui-coin-all Bouton pour ajouter des coins arrondis essayer
ui-mini Faire de petits boutons essayer
ui-shadow Bouton pour ajouter une ombre essayer

note Si vous avez besoin plus de styles, chaque classe de style séparés par un espace, par exemple: class = "ui-btn ui-btn-inline ui-btn-coin-all ui-ombre"

Par défaut, la touche <INPUT> a des coins arrondis et effet d'ombre. <a> et <bouton> éléments ne font pas.

classes CSS plus complètes, s'il vous plaît voir notre manuel jQuery Mobile CSS Référence de la classe .

La section suivante montre comment ajouter une icône sur le bouton.