Logo TouraineVerte

jQueryMobile pour mobiles smartphones tablettes

Large éventail de thèmes pour les pages jQueryMobile

Google Maps API Web Services

Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1    

Thèmes applicable aux pages A B C D E

Tutoriel publié le et mis à jour le
Tutoriel en Français

Thèmes & Pages

jQuery Mobile dispose d'un large éventail de thèmes qui vous donne un contrôle total sur la façon dont les pages sont stylisées. Il existe une documentation détaillée des thèmes au sein de chaque widget de la page, mais examinons quelques exemples et la façon dont les thèmes sont appliqués.

L'attribut data-theme peut être appliqué aux conteneurs de l'en-tête (header) et du pied de page (footer) pour appliquer l'une des lettres correspondant au thème désiré. Alors que l'attribut data-theme pourrait être ajouté au conteneur du contenu (content), nous vous recommandons, à la place, de l'ajouter à la balise div ou le conteneur qui a été assigné à l'attribut data-role="page" pour s'assurer que la couleur de fond est appliquée à la totalité de la page.

Lorsque cela est fait, tous les widgets présents sur la page hériteront également du thème spécifié dans le conteneur de la page. Cependant, en-têtes et pieds de page auront par défaut à thème "A". Par exemple, si vous voulez avoir une page avec uniquement le thème "B" appliqué à tous ses éléments, y compris son en-tête et son pied de page, vous devez spécifier le data-theme="b" sur la balise div "page" (<div data-role="page" data-theme="b">) ainsi que sur les divs "header" (<div data-role="header" data-theme="b">) et "footer" (<div data-role="footer" data-theme="b">).

Le thème par défaut mélange les styles des multiples échantillons pour créer une texture visuelle et présenter les différents éléments avec un contraste optimal les uns par rapport aux autres :

Théme par défaut

Code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Modèle de page thème A</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>Entête par défaut</h1>
			</div><!-- /header -->
			<div data-role="content">
				<h3>Entête</h3>
				<p>Voici le contenu du nuancier de couleur  par défaut et un aperçu 
				du <a href="#" class="ui-link">lien</a>.</p>
				<a href="#" data-role="button" data-inline="true">Bouton</a>
			</div>
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Thème par défaut

Et chacun des cinq "échantillons" applique son style constamment à travers tous les éléments de la page, comme indiqué ci-dessous :

Échantillon A

Code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Modèle de page thème A</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" data-theme="a">
				<h1>Entête A</h1>
			</div><!-- /header -->
			<div data-role="content" data-theme="a">
				<h3>Entête</h3>
				<p>Voici le contenu du nuancier de couleur "A" et un aperçu 
				du <a href="#" class="ui-link">lien</a>.</p>
				<a href="#" data-role="button" data-inline="true">Bouton</a>
			</div>
			<div data-role="footer" data-theme="a">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Thème A

Échantillon B

Code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Modèle de page thème A</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" data-theme="b">
				<h1>Entête A</h1>
			</div><!-- /header -->
			<div data-role="content" data-theme="b">
				<h3>Entête</h3>
				<p>Voici le contenu du nuancier de couleur "B" et un aperçu 
				du <a href="#" class="ui-link">lien</a>.</p>
				<a href="#" data-role="button" data-inline="true">Bouton</a>
			</div>
			<div data-role="footer" data-theme="b">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Thème B

Échantillon C

Code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Modèle de page thème A</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" data-theme="c">
				<h1>Entête A</h1>
			</div><!-- /header -->
			<div data-role="content" data-theme="c">
				<h3>Entête</h3>
				<p>Voici le contenu du nuancier de couleur "C" et un aperçu 
				du <a href="#" class="ui-link">lien</a>.</p>
				<a href="#" data-role="button" data-inline="true">Bouton</a>
			</div>
			<div data-role="footer" data-theme="c">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Thème C

Échantillon D

Code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Modèle de page thème A</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" data-theme="d">
				<h1>Entête A</h1>
			</div><!-- /header -->
			<div data-role="content" data-theme="d">
				<h3>Entête</h3>
				<p>Voici le contenu du nuancier de couleur "D" et un aperçu 
				du <a href="#" class="ui-link">lien</a>.</p>
				<a href="#" data-role="button" data-inline="true">Bouton</a>
			</div>
			<div data-role="footer" data-theme="d">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Thème D

Échantillon E

Code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Modèle de page thème A</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" data-theme="e">
				<h1>Entête A</h1>
			</div><!-- /header -->
			<div data-role="content" data-theme="e">
				<h3>Entête</h3>
				<p>Voici le contenu du nuancier de couleur "E" et un aperçu 
				du <a href="#" class="ui-link">lien</a>.</p>
				<a href="#" data-role="button" data-inline="true">Bouton</a>
			</div>
			<div data-role="footer" data-theme="e">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Thème E

Échantillon mélangés

Code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Modèle de page thèmes mélangés</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" data-theme="b">
				<h1>Entête B</h1>
			</div><!-- /header -->
			<div data-role="content" data-theme="a">
				<p>Voici le contenu du nuancier de couleur "A" et un aperçu du <a href="#" class="ui-link">lien</a>.</p>
				<a href="#" data-role="button" data-inline="true">Bouton</a>
			</div>
			<div data-role="footer" data-theme="e">
				<h4>Contenu du pied de page E</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Thèmes mélangés