Logo TouraineVerte

jQueryMobile pour mobiles smartphones tablettes

Groupe de boutons jQueryMobile verticaux ou horizontaux

Google Maps API Web Services

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

Boutons groupés et alignés verticalement ou horizontalement

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

Boutons groupés verticalement (par défaut)

Occasionnellement, vous voudrez peut-être grouper visuellement un jeu de boutons afin de former un seul bloc ressemblant à une composante de navigation. Pour obtenir cet effet, placez l'ensemble de ces boutons dans un conteneur ayant pour attribut data-role="controlgroup" — le framework créera un groupe de boutons verticaux, supprimera toutes les marges et les ombres portées entre les boutons, et arrondira uniquement le premier et dernier boutons pour créer un effet indiquant qu'il s'agit d'un groupe.

Par défaut, les boutons groupés se présentent sous la forme d'une liste verticale :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Boutons alignés verticalement (par défaut)</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>Boutons alignés verticalement (par défaut)</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<div data-role="controlgroup">
					<a href="index.html" data-role="button">Oui</a>
					<a href="index.html" data-role="button">Non</a>
					<a href="index.html" data-role="button">Peut-être</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 : Exemple de boutons alignés verticalement (par défaut).

Boutons groupés horizontalement avec texte

En ajoutant l'attribut data-type="horizontal" au conteneur controlgroup, vous pouvez basculer sur un groupe horizontal ou les boutons sont placés côte à côte définissant une largeur suffisamment grande pour accueillir le contenu. (Soyez conscient que ce type de groupe de boutons peut s'étendre sur plusieurs lignes, si le nombre de boutons est important ou si la longueur globale du texte dépasse la largeur de l'écran.)

Boutons groupés horizontalement :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Boutons groupés horizontalement</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>Boutons groupés horizontalement</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<div data-role="controlgroup" data-type="horizontal">
					<a href="index.html" data-role="button">Oui</a>
					<a href="index.html" data-role="button">Non</a>
					<a href="index.html" data-role="button">Peut-être</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 : Exemple de boutons groupés horizontalement.

Boutons groupés horizontalement avec texte et icônes

Boutons groupés horizontalement avec icônes :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Boutons groupés horizontalement avec texte et icônes</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>Boutons groupés horizontalement avec texte et icônes</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="index.html" data-role="button" data-icon="arrow-u">Haut</a>
					<a href="index.html" data-role="button" data-icon="arrow-d">Bas</a>
					<a href="index.html" data-role="button" data-icon="button">Supprimer</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 : Exemple de boutons groupés horizontalement avec texte et icônes.

Boutons sans texte et avec icône groupés horizontalement

Boutons uniquement avec icônes groupés horizontalement :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Boutons sans texte et avec icône groupés horizontalement</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>Boutons sans texte et avec icône groupés horizontalement</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<div data-role="controlgroup" data-type="horizontal" >
					<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Haut</a>
					<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Bas</a>
					<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Supprimer</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 : Exemple de boutons sans texte et avec icône groupés horizontalement.

Exemples de boutons groupés

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Exemple de boutons groupé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">
				<h1>Exemple de boutons groupés</h1>
			</div><!-- /header -->
			<div data-role="content">	
				<h2>Boutons groupés verticalement (par défaut)</h2>
					<div data-role="controlgroup">
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button">Oui</a>
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button">Non</a>
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button">Peut-être</a>
					</div>
				<h2>Boutons groupés horizontalement avec texte uniquement</h2>
					<div data-role="controlgroup" data-type="horizontal">
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button">Oui</a>
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button">Non</a>
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button">Peut-être</a>
					</div>
				<h2>Boutons groupés horizontalement avec texte et icônes</h2>
					<div data-role="controlgroup" data-type="horizontal" >
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button" data-icon="plus">Ajouter</a>
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button" data-icon="delete">Supprimer</a>
					</div>
				<h2>Boutons groupés horizontalement avec uniquement des icônes</h2>
					<div data-role="controlgroup" data-type="horizontal" >
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button" data-icon="arrow-u" data-iconpos="notext">Haut</a>
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button" data-icon="arrow-d" data-iconpos="notext">Bas</a>
						<a href="http://www.touraineverte.com/jquery-mobile/demos/1.0/docs/buttons/buttons-grouped.html" rel="external"data-role="button" data-icon="delete" data-iconpos="notext">Supprimer</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 : Exemple de boutons groupés verticalement et horizontalement.