Exemple de conception de bouton de thème dans le développement de pages mobiles jQuery

Cet article présente principalement les exemples de conception de boutons de thème dans le développement de pages mobiles jQuery. jQuery est la bibliothèque de développement JavaScript la plus populaire aujourd'hui. Les amis dans le besoin peuvent s'y référer

La moitié après l'icône blanche Le transparent. Le cercle noir garantit que l'image peut être affichée clairement sur n'importe quelle couleur d'arrière-plan et la fait également fonctionner correctement dans le système de thèmes Jquery Mobile. Voici quelques exemples de boutons d'icônes sous différents styles de thème

Bouton d'icône sous le thème "A" data-theme="a"

<p data-role="content"> 
 <p data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 </p>
 <p data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 <a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">My button</a>
 </p>
</p>

Bouton icône sous le thème "B" data-theme="b"

Bouton icône sous le thème "C" data-theme="c"

Boutons thématiques

Query Mobile propose un système de thèmes riche qui vous donne un contrôle total sur le style de vos boutons. Lorsqu'un lien est ajouté à un conteneur, une lettre lui est automatiquement attribuée qui correspond au bouton d'intégration visuelle de sa barre parent ou de sa zone de contenu dans l'échantillon de thème du conteneur parent, comme un caméléon. Ainsi, un bouton placé avec un contenu de thème "a" (noir dans le thème par défaut) se verra automatiquement attribuer le thème du bouton "a" (charbon dans le thème par défaut). a est noir, b est gris avec du bleu, c est gris avec du gris, d est blanc avec du blanc et e est jaune avec du jaune. Ceci est un exemple du thème par défaut pour un bouton. Tous les boutons ont le même balisage HTML :

<p data-role="content"> 
 <p class="ui-body ui-body-a"><h4>Swatch "a"</h4><a href="index.html" data-role="button">Button</a></p>
 <p class="ui-body ui-body-b"><h4>Swatch "b"</h4><a href="index.html" data-role="button">Button</a></p>
 <p class="ui-body ui-body-c"><h4>Swatch "c"</h4><a href="index.html" data-role="button">Button</a></p>
 <p class="ui-body ui-body-d"><h4>Swatch "d"</h4><a href="index.html" data-role="button">Button</a></p>
 <p class="ui-body ui-body-e"><h4>Swatch "e"</h4><a href="index.html" data-role="button">Button</a></p>
</p>

Attribuez le thème de données de style système

pour ajouter des données au attribut button -theme="letter", vous pouvez ajouter manuellement des styles au bouton, afin que le bouton ne doive pas correspondre au style du conteneur parent

<p data-role="content"> 
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</p>

Les changements de thème apportés à ui-body

ont cinq ensembles de styles par défaut, ui-body-a, ui-body-b, ui-body-c, ui-body-d , ui-body-e

<p class="ui-body ui-body-a">
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</p>

<p class="ui-body ui-body-b">
 <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
 <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
 <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
 <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
 <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!