thèmes jQuery Mobile
jQuery Mobile propose deux styles thématiques différents, de "a" à "b" - chacun des boutons à thème, des barres d'outils, etc. contenu couleurs de blocs sont incompatibles, l'effet visuel est pas le même pour chaque sujet.
En définissant l'attribut élément data-theme peut personnaliser l'apparence de l'application:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| valeur | description | Exemples |
|---|---|---|
| un | Page texte noir sur une tête de fond gris et bas sont du texte noir sur un fond gris blanc bouton texte gris boutons d'activation et des liens vers le texte blanc sur un fond bleu entrée d'entrée boîte espace réservé valeur d'attribut est un gris clair, la valeur est noir | essayer |
| b | Page fond noir avec du texte blanc au bas de la tête sont un texte blanc sur fond noir un bouton de texte blanc activé charbon boutons et des liens de fond au texte blanc sur un fond bleu entrée d'entrée boîte espace réservé valeur d'attribut est un gris clair, la valeur est blanche | essayer |
Utilisez le bouton de style class = "ui-btn", en utilisant "ui-btn-a | b" bouton Paramètres de la classe est grisée (par défaut) ou noir:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | thème "A" de style pour la plupart des éléments, sous-éléments héritent généralement le style de l'élément parent. |
|---|
tops Sujet et bas
Exemples
<div data-role="footer" data-theme="b"></div>
Essayez »
Le fond de la tête de thème de boîte de dialogue
Exemples
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Essayez »
bouton Sujets
icônes thématiques
sujet pop
bouton Thèmes en bas de la tête et
Exemples
<a href="#" class="ui-btn ui-btn-b"> Accueil </a>
<H1> Bienvenue sur ma page d'accueil </ h1>
<a href="#" class="ui-btn"> recherche </a>
</ Div>
<Div data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Suivez-moi sur Facebook </a>
<a href="#" class="ui-btn"> Suivez-moi sur Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Suivez-moi sur Instagram </a>
</ Div>
Essayez »
Sujet Barre de navigation
Exemples
<h1>文本头部</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div>
Essayez »
panneau Thème
boutons pliables Sujet et contenu
Exemples
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Essayez »
Liste des sujets
Exemples
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li data-theme="a"><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
Essayez »
bouton partagé Sujet
Sujet Liste Pliable
Exemples
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Essayez »
Formulaire Thèmes
Exemples
<input type="text" name="text" id="name" data-theme="b">
<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Essayez »
forme pliable Sujet
Exemples
<legend>Click me - I'm collapsible!</legend>
Essayez »
Ajouter un nouveau sujet
jQuery Mobile peut ajouter de nouveaux sujets dans la page mobile.
En modifiant le fichier CSS pour ajouter ou modifier un nouveau thème (si vous avez téléchargé le jQuery Mobile). Il vous suffit de copier le module de style, et puis re-lettre nom de la classe de commande (cz), et d'ajouter votre couleur et la police style favori.
Vous pouvez également ajouter document HTML concernant le nouveau style, la barre d'outils ajouter classe: ui-bar- (az), ajouter des catégories de contenu de texte: ui-corps- (az), ajouter des catégories de pages: ui-page-theme- ( az).
Exemples
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
Essayez »
| Dans les versions précédentes de jQuery Mobile, un élément en utilisant JavaScript pour hériter des styles de thème parent. Pour la version 1.4, le cadre est davantage l'accent sur l'amélioration de la performance, de ne plus utiliser l'héritage JavaScript mais en utilisant pur CSS. équipe jQuery Mobile pour cette avoir créé un outil pour répondre à la ThemeRoller . Vous pouvez utiliser cet outil pour mettre à niveau un vieux thème, le rendant compatible avec la nouvelle version. |
|---|