Une brève analyse de l'écriture des boutons en ligne et des boutons de groupe dans jQuery mobile development_jquery

Bouton en ligne data-inline=true
Par défaut, tous les boutons dans le contenu du corps sont appelés éléments de niveau bloc, ils remplissent donc la largeur de l'écran.

Cependant, si vous souhaitez que le bouton ait l'air compact et que la largeur ne corresponde qu'au texte et à l'icône à l'intérieur, ajoutez l'attribut data-inline="true" au bouton.

Si vous avez plusieurs boutons qui doivent être placés côte à côte sur la même ligne, définissez l'attribut data-inline="true" pour chaque bouton. Cela stylisera le bouton en fonction de la largeur de son contenu et fera flotter le bouton afin qu'il se trouve sur la même ligne.

<a href="index.html" data-role="button" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>

Ajoutez data-mini="true" pour créer une version plus compacte du bouton en ligne :

<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
<a href="index.html" data-role="button" data-icon="check" data-inline="true" data-theme="b">Save</a>

Bouton Groupe data-role=controlgroup
Parfois, vous souhaitez placer un groupe de boutons dans un conteneur séparé afin qu'ils ressemblent à un widget de navigation distinct. Vous pouvez envelopper un groupe de boutons dans un conteneur, puis ajouter l'attribut data-role="controlgroup" au conteneur. Jquery Mobile créera un groupe de boutons vertical, supprimera la marge et l'ombre entre les boutons, puis ajoutera uniquement le groupe de boutons. first Le premier et le dernier bouton ont des coins arrondis, ce qui les fait ressembler à un groupe de boutons.

<div data-role="controlgroup">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Organiser horizontalement data-type="horizontal"

Par défaut, les boutons de groupe sont affichés sous forme de liste verticale. Si vous ajoutez l'attribut data-type="horizontal" au conteneur, il peut être converti en une liste de boutons horizontaux. par un et définissez Seulement assez grand pour s'adapter à la largeur du contenu. ((Attention donc à ne pas avoir trop de boutons ni trop de mots sur les boutons en disposition horizontale)

<div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Version mini data-mini="true"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

Icône uniquement data-iconpos="notext"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>