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

Gestion et affectation des thèmes aux boutons

Tutoriel publié le 29 Décembre 2011 et mis à jour le 20 Janvier 2012

Thèmes pour boutons
Attribution d'un thème
Variations de thème

Thèmes pour boutons

jQuery Mobile possède un riche système de thèmes qui vous donne le plein contrôle sur le style à appliquer aux boutons. Quand un lien est ajouté à un conteneur, il lui est attribué automatiquement une lettre désignant le thème qui correspond à sa barre ou la boîte de contenu parent, pour une intégration visuelle du bouton dans le conteneur parent (mimétisme des couleurs). Donc, un bouton placé à l'intérieur d'un conteneur de contenu ayant un thème "A" ("Noir" dans le thème par défaut) aura automatiquement d'attribué le thème "A" au bouton("Charbon de bois" dans le thème par défaut). Voici des exemples d'association de thème de bouton dans le thème par défaut. Tous les boutons ont le même balisage HTML :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Attribuer une couleur spécifique à un bouton</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>Attribuer une couleur spécifique à un bouton</h1>
			</div><!-- /header -->
			<div data-role="content">	
				/**
				 * Conteneur ayant pour thème "A".
				 * Le bouton se voit automatiquement attribuer le thème "A"
				 */
				<div class="ui-body ui-body-a">
					<h4>Thème A</h4>
					<a href="index.html" data-role="button">Bouton</a>
				</div>

				/**
				 * Conteneur ayant pour thème "B".
				 * Le bouton se voit automatiquement attribuer le thème "B"
				 */
				<div class="ui-body ui-body-b">
					<h4>Thème B</h4>
					<a href="index.html" data-role="button">Bouton</a>
				</div>

				/**
				 * Conteneur ayant pour thème "C".
				 * Le bouton se voit automatiquement attribuer le thème "C"
				 */
				<div class="ui-body ui-body-c">
					<h4>Thème C</h4>
					<a href="index.html" data-role="button">Bouton</a>
				</div>

				/**
				 * Conteneur ayant pour thème "D".
				 * Le bouton se voit automatiquement attribuer le thème "D"
				 */
				<div class="ui-body ui-body-d">
					<h4>Thème D</h4>
					<a href="index.html" data-role="button">Bouton</a>
				</div>

				/**
				 * Conteneur ayant pour thème "E".
				 * Le bouton se voit automatiquement attribuer le thème "E"
				 */
				<div class="ui-body ui-body-e">
					<h4>Thème E</h4>
					<a href="index.html" data-role="button">Bouton</a>
				</div>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemples de thèmes appliqués aux conteneurs et se répercutant sur les boutons.

Attribution d'un thème

Il est possible d'attribuer manuellement aux boutons n'importe quelle couleur de thème afin d'ajouter un contraste visuel avec le conteneur en ajoutant data-theme au balisage du bouton et en spécifiant une lettre de thème.

<a href="index.html" data-role="button" data-theme="a">Thème a</a>

Voici 4 boutons avec icônes dont le thème varie en fonction de la lettre associée à l'attribut data-theme.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Attribuer une couleur spécifique à un bouton</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>Attribuer une couleur spécifique à un bouton</h1>
			</div><!-- /header -->
			<div data-role="content">	
				/* Thème "A" pour le bouton avec icône "flèche à gauche" */
				<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème a</a>
				/* Thème "B" pour le bouton avec icône "flèche à gauche" */
				<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème b</a>
				/* Thème "C" pour le bouton avec icône "flèche à gauche" */
				<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème c</a>
				/* Thème "D" pour le bouton avec icône "flèche à gauche" */
				<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème d</a>
				/* Thème "E" pour le bouton avec icône "flèche à gauche" */
				<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème e</a>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemples d'attribution de thème ou couleur à un bouton.

Variations de thème

Thème "A" pour le conteneur - Thème différent pour chaque bouton

Thème "A" pour le conteneur avec, à l'intérieur, différents thèmes pour les boutons

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Attribuer une couleur spécifique à un bouton</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>Attribuer une couleur spécifique à un bouton</h1>
			</div><!-- /header -->
			<div data-role="content">	
				/**
				 * Thème "A" pour le conteneur
				 */
				<div class="ui-body ui-body-a">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème a</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème b</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème c</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème d</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème e</a>
				</div>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Thème "B" pour le conteneur - Thème différent pour chaque bouton

Thème "B" pour le conteneur avec, à l'intérieur, différents thèmes pour les boutons

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Attribuer une couleur spécifique à un bouton</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>Attribuer une couleur spécifique à un bouton</h1>
			</div><!-- /header -->
			<div data-role="content">	
				/**
				 * Thème "B" pour le conteneur
				 */
				<div class="ui-body ui-body-b">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème a</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème b</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème c</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème d</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème e</a>
				</div>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Thème "C" pour le conteneur - Thème différent pour chaque bouton

Thème "C" pour le conteneur avec, à l'intérieur, différents thèmes pour les boutons

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Attribuer une couleur spécifique à un bouton</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>Attribuer une couleur spécifique à un bouton</h1>
			</div><!-- /header -->
			<div data-role="content">	
				/**
				 * Thème "C" pour le conteneur
				 */
				<div class="ui-body ui-body-c">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème a</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème b</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème c</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème d</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème e</a>
				</div>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Thème "D" pour le conteneur - Thème différent pour chaque bouton

Thème "D" pour le conteneur avec, à l'intérieur, différents thèmes pour les boutons

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Attribuer une couleur spécifique à un bouton</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>Attribuer une couleur spécifique à un bouton</h1>
			</div><!-- /header -->
			<div data-role="content">	
				/**
				 * Thème "D" pour le conteneur
				 */
				<div class="ui-body ui-body-d">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème a</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème b</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème c</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème d</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème e</a>
				</div>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Thème "E" pour le conteneur - Thème différent pour chaque bouton

Thème "E" pour le conteneur avec, à l'intérieur, différents thèmes pour les boutons

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Attribuer une couleur spécifique à un bouton</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>Attribuer une couleur spécifique à un bouton</h1>
			</div><!-- /header -->
			<div data-role="content">	
				/**
				 * Thème "E" pour le conteneur
				 */
				<div class="ui-body ui-body-e">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème a</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème b</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème c</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème d</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème e</a>
				</div>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Thème différent pour chaque conteneur - Thème différent pour chaque bouton

Différents Thèmes pour les conteneurs avec, à l'intérieur, différents thèmes pour les boutons

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Attribuer une couleur spécifique à un bouton</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>Attribuer une couleur spécifique à un bouton</h1>
			</div><!-- /header -->
			<div data-role="content">
				<p><strong>Thème "A"</strong> pour le conteneur avec, à l´intérieur, différents thèmes pour les boutons</p>
				/**
				 * Thème "A" pour le conteneur
				 */
				<div class="ui-body ui-body-a">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème "A"</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème "B"</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème "C"</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème "D"</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème "E"</a>
				</div>
				
				<p><strong>Thème "B"</strong> pour le conteneur avec, à l´intérieur, différents thèmes pour les boutons</p>
				/**
				 * Thème "B" pour le conteneur
				 */
				<div class="ui-body ui-body-b">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème "A"</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème "B"</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème "C"</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème "D"</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème "E"</a>
				</div>
				
				<p><strong>Thème "C"</strong> pour le conteneur avec, à l´intérieur, différents thèmes pour les boutons</p>
				/**
				 * Thème "C" pour le conteneur
				 */
				<div class="ui-body ui-body-c">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème "A"</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème "B"</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème "C"</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème "D"</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème "E"</a>
				</div>
				
				<p><strong>Thème "D"</strong> pour le conteneur avec, à l´intérieur, différents thèmes pour les boutons</p>
				/**
				 * Thème "D" pour le conteneur
				 */
				<div class="ui-body ui-body-d">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème "A"</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème "B"</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème "C"</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème "D"</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème "E"</a>
				</div>
				
				<p><strong>Thème "E"</strong> pour le conteneur avec, à l´intérieur, différents thèmes pour les boutons</p>
				/**
				 * Thème "E" pour le conteneur
				 */
				<div class="ui-body ui-body-e">
					/* Thème "A" pour le bouton */
					<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Thème "A"</a>
					/* Thème "B" pour le bouton */
					<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Thème "B"</a>
					/* Thème "C" pour le bouton */
					<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Thème "C"</a>
					/* Thème "D" pour le bouton */
					<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Thème "D"</a>
					/* Thème "E" pour le bouton */
					<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Thème "E"</a>
				</div>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemples de variation de couleurs de boutons dans un conteneur.

jQueryMobile pour mobiles smartphones tablettes

Attribution d'un thème aux boutons jQueryMobile

Google Maps API Web Services