jQuery Mobile Thèmes
jQuery Mobile propose deux thèmes différents de style, "a" et "b" - chacune avec des couleurs différentes pour les boutons, barres, blocs de contenu, et ainsi de suite.
Pour personnaliser l'apparence de votre application, utilisez la data-theme attribut, et attribuer l'attribut avec une lettre:
<div data-role="page" data-theme="a|b" >
| Valeur | La description | Exemple |
|---|---|---|
| a | Le texte noir sur un fond gris clair pour le contenu de la page Le texte noir sur un fond gris pour les en-têtes et pieds de page Le texte noir sur un fond gris clair pour les boutons Le texte blanc sur un fond bleu pour les boutons actifs Le texte en bleu sur les liens texte gris clair (fictif) ou du texte noir (valeur) sur un fond blanc pour les champs d'entrée | Essayez - le |
| b | Le texte blanc sur un fond gris foncé pour le contenu de la page Le texte blanc sur un fond gris foncé pour les en-têtes et pieds de page Le texte blanc sur un fond de charbon de bois pour les boutons Le texte blanc sur un "cyan" fond bleu pour les boutons actifs "Cyan" texte bleu sur les liens texte Gray (espace réservé) ou texte blanc (valeur) sur un fond noir pour les champs d'entrée | Essayez - le |
Pour les boutons avec class="ui-btn" , utilisez la "ui-btn-a|b" classe pour coiffer le bouton soit gris (par défaut) ou noir:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
Le "a" thème est utilisé pour la plupart des éléments, et les éléments de l' enfant hérite souvent le thème de son parent (ou page).
Theming-tête et pied
Exemple
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Essayez - le vous - même » Theming-tête et pied dans Dialogs
Exemple
<div data-role="page" data-dialog="true" id="pagetwo">
<div
data-role="header" data-theme="b"></div>
<div
data-role="footer" data-theme="b"></div>
</div> Essayez - le vous - même » Thématisation Boutons
Thématisation Icons
Exemple
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Essayez - le vous - même » theming popups
Boutons Thématisation en-tête et pied de page
Exemple
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Essayez - le vous - même » Bars Theming Navigation
Exemple
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</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 - le vous - même » Panneaux Thématisation
Thématisation Bouton Pliable et contenu
Exemple
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> Essayez - le vous - même » Listes Thématisation
Exemple
<ul data-role="listview" data-theme="b">
<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 - le vous - même » Theming fendus Boutons
Thématisation Listes pliables
Exemple
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Essayez - le vous - même » Thématisation Forms
Exemple
<label for="name">Full Name:</label>
<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 - le vous - même » Thématisation formes pliables
Exemple
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Essayez - le vous - même » Ajouter de nouveaux thèmes
jQuery Mobile permet également d'ajouter de nouveaux thèmes à vos pages mobiles.
Ajouter ou modifier de nouveaux thèmes en éditant le fichier CSS (si vous avez télécharger jQuery Mobile). Il suffit de copier un bloc de styles et de renommer les classes avec un nom de lettre (cz), et ajuster les couleurs et les polices que vous le souhaitez.
Vous pouvez également ajouter de nouveaux styles en utilisant des classes à thème dans le document HTML - ajouter la classe "ui-bar- (az)" pour les barres d'outils, "ui-corps- (az)" pour le contenu et ui-page-theme- ( az) "pour la page:
Exemple
<style>
.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 - le vous - même » Dans les versions précédentes de jQuery Mobile, JavaScript utilisé pour gérer la façon dont un élément doit hériter le thème du parent. Au 1.4, le cadre est axé sur l'amélioration de la performance et JavaScript a été remplacé par pur CSS.
L'équipe jQuery Mobile a créé un outil qui vous aide à créer votre propre thème personnalisé: Le ThemeRoller . Vous pouvez également utiliser cet outil pour mettre à niveau des thèmes plus anciens pour les rendre compatibles avec la nouvelle version.