Thèmes pour la zone de contenu
Un thème peut être appliqué sur le contenu principal d'une page (conteneur avec l'attribut data-role="content") à l'aide de l'attribut data-theme appliqué sur le conteneur data-role="page" afin de s'assurer que les couleurs de fond seront appliquées à l'ensemble de la page, quelque soit la longueur du contenu. (Si vous ajoutez data-theme au contenu du conteneur, la couleur de fond s'arrêtera après le contenu pouvant ainsi provoquer une écart de couleur entre le contenu et le pied de page fixe.)
<div data-role="page" data-theme="a">
Thèmes pour les blocs déployables
Pour définir la couleur de l'en-tête déployable, ajoutez l'attribut data-theme au conteneur du bloc déployable. A l'heure actuelle aucun thème n'est applicable à l'icône et au corps à travers les attributs data, mais ils peuvent être directement personnalisé avec des régles de style CSS.
<div data-role="collapsible" data-collapsed="true" data-theme="a">
Exemples de thèmes
Thème A
Thème A appliqué au contenu et sur un bloc déployable
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page unique</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page unique</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-body ui-body-a"> <h1>H1 Entête</h1> <p>Ceci est un paragraphe contenant une balise <strong>strong</strong>, <em>emphasized</em> et <a href="index.html">lien</a> texte. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu.</p> <div data-role="collapsible" data-collapsed="true" data-theme="a"> <h3>Je suis un thème repliable</h3> <p>J´ai un attribut "data-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div><!-- /collapsible --> <div data-role="collapsible" data-theme="a" data-content-theme="a"> <h3>Je suis un thème pliable avec un contenu thématique</h3> <p>J´ai un attribut "data-content-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple thème A
Thème B
Thème B appliqué au contenu et sur un bloc déployable
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page unique</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page unique</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-body ui-body-b"> <h1>H1 Entête</h1> <p>Ceci est un paragraphe contenant une balise <strong>strong</strong>, <em>emphasized</em> et <a href="index.html">lien</a> texte. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu.</p> <div data-role="collapsible" data-collapsed="true" data-theme="b"> <h3>Je suis un thème repliable</h3> <p>J´ai un attribut "data-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div><!-- /collapsible --> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h3>Je suis un thème pliable avec un contenu thématique</h3> <p>J´ai un attribut "data-content-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple thème B
Thème C
Thème C appliqué au contenu et sur un bloc déployable
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page unique</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page unique</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-body ui-body-c"> <h1>H1 Entête</h1> <p>Ceci est un paragraphe contenant une balise <strong>strong</strong>, <em>emphasized</em> et <a href="index.html">lien</a> texte. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu.</p> <div data-role="collapsible" data-collapsed="true" data-theme="c"> <h3>Je suis un thème repliable</h3> <p>J´ai un attribut "data-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div><!-- /collapsible --> <div data-role="collapsible" data-theme="c" data-content-theme="c"> <h3>Je suis un thème pliable avec un contenu thématique</h3> <p>J´ai un attribut "data-content-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple thème C
Thème D
Thème D appliqué au contenu et sur un bloc déployable
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page unique</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page unique</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-body ui-body-d"> <h1>H1 Entête</h1> <p>Ceci est un paragraphe contenant une balise <strong>strong</strong>, <em>emphasized</em> et <a href="index.html">lien</a> texte. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu.</p> <div data-role="collapsible" data-collapsed="true" data-theme="d"> <h3>Je suis un thème repliable</h3> <p>J´ai un attribut "data-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div><!-- /collapsible --> <div data-role="collapsible" data-theme="d" data-content-theme="d"> <h3>Je suis un thème pliable avec un contenu thématique</h3> <p>J´ai un attribut "data-content-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple thème D
Thème E
Thème E appliqué au contenu et sur un bloc déployable
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page unique</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page unique</h1> </div><!-- /header --> <div data-role="content"> <div class="ui-body ui-body-e"> <h1>H1 Entête</h1> <p>Ceci est un paragraphe contenant une balise <strong>strong</strong>, <em>emphasized</em> et <a href="index.html">lien</a> texte. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu. Voici plus de texte afin de voir comment le balisage HTML fonctionne dans le contenu.</p> <div data-role="collapsible" data-collapsed="true" data-theme="e"> <h3>Je suis un thème repliable</h3> <p>J´ai un attribut "data-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div><!-- /collapsible --> <div data-role="collapsible" data-theme="e" data-content-theme="e"> <h3>Je suis un thème pliable avec un contenu thématique</h3> <p>J´ai un attribut "data-content-theme" défini manuellement sur mon conteneur pour définir la couleur pour faire correspondre le bloc de contenu dans lequel je suis.</p> </div> </div> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Exemple thème E