jQuery Mobile Thèmes

jQuery Mobile propose 2 styles de thème différents, de « a » à « b » - chaque thème a des couleurs différentes pour les boutons, les barres d'outils, les blocs de contenu, etc., et chaque thème a un effet visuel différent.

Vous pouvez personnaliser l'apparence de l'application en définissant l'attribut data-theme d'un élément :

<a href="../index.html" class="ui-btn ui-btn-a|b">按钮</a>

Valeur Description Exemple
a La page a un fond gris et un texte noir
L'en-tête et le pied de page ont tous deux un fond gris et un texte noir
Les boutons ont un fond gris et un texte noir
Les boutons actifs et les liens ont un texte blanc sur fond bleu
Dans les champs de saisie, la valeur de l'attribut placeholder est gris clair, et la valeur est noire		 Essayez-le
b La page a un fond noir et un texte blanc
L'en-tête et le pied de page ont tous deux un fond noir et un texte blanc
Les boutons ont un texte blanc sur fond anthracite
Les boutons actifs et les liens ont un texte blanc sur fond bleu
Dans les champs de saisie, la valeur de l'attribut placeholder est gris clair, et la valeur est blanche		 Essayez-le

Les styles de bouton utilisent class="ui-btn". Utilisez la classe "ui-btn-a|b" pour définir le bouton en gris (par défaut) ou noir :

<a href="../index.html" class="ui-btn ui-btn-a|b">按钮</a>

lamp Le style de thème "a" est utilisé pour la plupart des éléments ; les éléments enfants héritent généralement du style de l'élément parent.

Thème de l'en-tête et du pied de page

Exemple

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

Essayez-le »

Thème de l'en-tête et du pied de page de la boîte de dialogue

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 »

Boutons de thème

Exemple

<a href="#" class="ui-btn ui-btn-b">Bouton noir</a>

Essayez-le »

Icônes de thème

Exemple

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Rechercher</a>

Essayez-le »

Fenêtre contextuelle de thème

Exemple

<div data-role="popup" id="myPopup" data-theme="b">

Essayez-le »

Boutons de thème d'en-tête et de pied de page

Exemple

<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">Accueil</a>
<h1>Bienvenue sur ma page d'accueil</h1>
<a href="#" class="ui-btn">Rechercher</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-le »

Barre de navigation thématique

Exemple

<div data-role="footer" data-theme="b">
<h1>En-tête de texte</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="a">Bouton 1</a></li>
      <li><a href="#" data-icon="arrow-r">Bouton 2</a></li>
      <li><a href="#" data-icon="arrow-r">Bouton 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a">Bouton 4</a></li>
    </ul>
  </div>
</div>

Essayez-le »

Panneau thématique

Exemple

<div data-role="panel" id="myPanel" data-theme="b">

Essayez-le »

Boutons et contenu repliables thématiques

Exemple

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h1>Cliquez sur moi - Je suis repliable !</h1>
  <p>Je suis le contenu développé.</p>
</div>

Essayez-le »

Liste de thèmes

Exemple

<ul data-role="listview" data-theme="b">
  <li><a href="#">Élément de liste</a></li>
  <li><a href="#">Élément de liste</a></li>
  <li data-theme="a"><a href="#">Élément de liste</a></li>
  <li><a href="#">Élément de liste</a></li>
</ul>

Essayez-le »

Boutons fractionnés de thème

Exemple

<ul data-role="listview" data-split-theme="b">

Essayez-le »

Liste repliable de thème

Exemple

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <ul data-role="listview">
    <li><a href="#">Agnès</a></li>
  </ul>
</div>

Essayez-le »

Formulaire de thème

Exemple

<label for="name">Nom complet :</label>
<input type="text" name="text" id="name" data-theme="b">

<label for="colors">Choisissez votre couleur préférée :</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Rouge</option>
  <option value="green">Vert</option>
  <option value="blue">Bleu</option>
</select>

Essayez-le »

Formulaire de thème repliable

Exemple

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Cliquez sur moi - Je suis repliable !</legend>

Essayez-le »

Ajouter un nouveau thème

jQuery Mobile peut ajouter de nouveaux thèmes aux pages mobiles.

Vous pouvez ajouter ou modifier de nouveaux thèmes en modifiant le fichier CSS (si vous avez téléchargé jQuery Mobile). Il vous suffit de copier le module de style, puis de renommer les noms de classe alphabétiques (c-z), et d'ajouter les couleurs et polices que vous souhaitez aux styles.

Vous pouvez également ajouter de nouveaux styles de thème dans le document HTML. Pour les barres d'outils, ajoutez les classes : ui-bar-(a-z); pour le contenu textuel, ajoutez les classes : ui-body-(a-z); pour les pages, ajoutez les classes : ui-page-theme-(a-z).

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 »

Note Dans les versions précédentes de jQuery Mobile, JavaScript était utilisé pour faire en sorte que les éléments héritent des styles du thème parent. Après la version 1.4, le framework s'est davantage concentré sur les améliorations de performances et n'utilise plus JavaScript pour l'héritage, mais utilise plutôt du CSS pur.

L'équipe jQuery Mobile a créé un outil à cet effet, à l'adresseThemeRollerVous pouvez utiliser cet outil pour mettre à niveau les anciens thèmes afin qu'ils soient compatibles avec la nouvelle version.
Autres extensions