Thèmes jQuery Mobile

Thèmes jQuery Mobile

jQuery Mobile propose cinq différents thèmes de style, allant de "a" à "e" - chaque thème comporte des boutons, des barres, des blocs de contenu et autres de couleurs différentes. Un thème de jQuery Mobile est composé de multiples effets visuels et de couleurs.

Pour personnaliser l'apparence de l'application, utilisez l'attribut data-theme et assignez une lettre à cet attribut :

<div data-role="page" data-theme="a|b|c|d|e">
Valeur Description Exemple
a Par défaut. Texte blanc sur fond noir. Test
b Texte blanc sur fond bleu / texte noir sur fond gris Test
c Texte noir sur fond gris clair Test
d Texte noir sur fond blanc Test
e Texte noir sur fond orange Test

Astuce :Mélangez vos thèmes préférés !

Par défaut, jQuery Mobile utilise le thème "a" pour les en-têtes et les pieds de page, et le thème "c" pour le contenu de l'en-tête (gris clair). Cependant, vous pouvez mixer les thèmes à votre guise.

Page, contenu et pied de page thématiques

Exemple

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

Essayez-le vous-même

Dialogue thématique

Exemple

<a href="#pagetwo" data-rel="dialog">Aller à la page de dialogue thématique</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

Essayez-le vous-même

Bouton thématique

Exemple

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

Essayez-le vous-même

Icône thématique

Exemple

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

Essayez-le vous-même

Bouton thématique dans l'en-tête et le pied de page

Exemple

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Accueil</a>
  <h1>Bienvenue sur ma page d'accueil</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Recherche</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Bouton 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Bouton 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Bouton 3</a>
</div>

Essayez-le vous-même

Barre de navigation thématique

Exemple

<div data-role="footer" data-theme="e">
  <h1>Insérez du texte de pied de page ici</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">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 vous-même

Bouton et contenu repliables thématiques

Exemple

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

Essayez-le vous-même

Liste thématique

Exemple

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

Essayez-le vous-même

Bouton de division thematisé

Exemple

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

Essayez-le vous-même

Liste déroulable thematisée

Exemple

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Essayez-le vous-même

Formulaire thematisé

Exemple

<label for="name">Nom complet :</label>
<input type="text" name="text" id="name" data-theme="a">
<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 vous-même

Formulaire déroulable thematisé

Exemple

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

Essayez-le vous-même

Ajouter un nouveau thème

jQuery Mobile permet également d'ajouter de nouveaux thèmes aux pages mobiles.

Ajoutez ou éditez de nouveaux thèmes en éditant le fichier CSS (comme jQuery Mobile téléchargé). Il suffit de copier un segment de style, de renommer les classes avec des lettres (f-z) et d'ajuster les couleurs et les polices de votre choix :

Vous pouvez également ajouter de nouveaux styles en utilisant des classes de thèmes dans les documents HTML - ajoutez la classe ui-bar-(a-z) à la barre d'outils et la classe ui-body-(a-z) au contenu :

Exemple

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

Essayez-le vous-même