Logo TouraineVerte

jQueryMobile pour mobiles smartphones tablettes

Insérer des colonnes dans une page jQueryMobile

Google Maps API Web Services

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

Mise en page à l'aide de colonnes avec la classe ui-grid

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

Généralement, il n'est pas recommandé d'utiliser une présentation basée sur des colonnes pour un appareil mobile, en raison de l'étroitesse de l'écran, mais parfois vous pouvez être amené à placer des petits éléments côte à côte (tels que des boutons ou des onglets par exemple).

Le framework jQuery Mobile fournit un moyen simple de construire des colonnes à base de régles CSS grâce à une convention de classe de style de bloc appelée ui-grid.

Il existe deux types de disposition — deux colonnes (utilisant la classe class="ui-grid-a"), et trois colonnes (utilisant la class="ui-grid-b") — qui peuvent être utilisées dans tout contexte nécessitant des colonnes. Les grilles occupent 100% de la largeur de l'écran, sont totalement invisibles (ni border, ni background), elles n'ont ni padding ni margin, ainsi elles ne devraient pas interférer avec les styles des éléments placés en eux.

Grille à deux colonnes

Pour construire une mise en page à deux colonnes (50/50%), commencer avec un conteneur avec la class ui-grid-a, et lui ajouter à l'intérieur deux conteneurs enfants ayant pour classe ui-block-a pour la première colonne et ui-block-b pour la seconde :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille à deux colonnes</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>Grille à deux colonnes</h1>
			</div><!-- /header -->
			<div data-role="content">
				<div class="ui-grid-a">
					<div class="ui-block-a"><strong>Je suis le Block A</strong> et le texte sera enveloppé à l´intérieur.</div>
					<div class="ui-block-b"><strong>Je suis le Block B</strong> et le texte sera enveloppé à l´intérieur.</div>
				</div><!-- /grid-a -->
			</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 grille à deux colonnes.

Comme vous pouvez le constater avec le code ci-dessus, les colonnes de la grille n'ont aucun style par défaut; elles présentent simplement le contenu côte à côte.

Les classes de la grille peuvent être appliquées sur n'importe quel conteneur. Dans l'exemple suivant, nous ajoutons la class ui-grid-a à la balise fieldset, et appliquons les classes ui-block aux deux boutons situés à l'intérieur afin qu'ils occupent chacun 50% de la largeur de l'écran :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille à deux colonnes avec un bouton dans chaque colonne</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>Grille à deux colonnes avec un bouton dans chaque colonne</h1>
			</div><!-- /header -->
			<div data-role="content">
				<fieldset class="ui-grid-a">
					<div class="ui-block-a"><button type="submit" data-theme="c">Annuler</button></div>
					<div class="ui-block-b"><button type="submit" data-theme="b">Envoyer</button></div>	   
				</fieldset>
			</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 grille à deux colonnes avec un bouton dans chaque colonne.

Des classes de thème (pas les attributs data-theme) depuis le système de thèmes peut être ajouté à un élément, y compris les grilles. Sur les blocs ci-dessous, nous ajoutons deux classes : ui-bar pour ajouter le padding de la barre par défaut et ui-bar-e pour appliquer un fond dégradé et le style de la barre d'outils du thème "e". A des fins d'illustration, un style en ligne style="height:120px" est également ajouté à chaque colonne pour standardiser leur hauteur.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille à deux colonnes avec style</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>Grille à deux colonnes avec style</h1>
			</div><!-- /header -->
			<div data-role="content">
				<fieldset class="ui-grid-a">
					<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Bloc A</div></div>
					<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Bloc B</div></div>
				</fieldset>
			</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 grille à deux colonnes avec style.

Grille à trois colonnes

L'autre configuration pour une mise en page sous forme de grille utilise la classe class=ui-grid-b pour le conteneur parent, et 3 conteneurs enfant ayant chacun pour classe respective ui-block-a, ui-block-b, ui-block-c, pour créer une présentation 3 colonnes (33/33/33%). Remarque: Ces blocs sont également stylisés avec des classes de thème de sorte que la grille est clairement visible.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille à trois colonnes</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>Grille à trois colonnes</h1>
			</div><!-- /header -->
			<div data-role="content">
				<div class="ui-grid-b">
					<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
					<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">Block B</div></div>
					<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">Block C</div></div>
				</div><!-- /grid-b -->
			</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 grille à trois colonnes.

Voici un exemple de grille à 3 colonnes avec des boutons à l'intérieur :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille à trois colonnes avec un bouton dans chaque colonne</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>Grille à trois colonnes avec un bouton dans chaque colonne</h1>
			</div><!-- /header -->
			<div data-role="content">
				<fieldset class="ui-grid-b">
					<div class="ui-block-a"><button type="submit" data-theme="c">Hmm</button></div>
					<div class="ui-block-b"><button type="submit" data-theme="a">No</button></div>	 
					<div class="ui-block-b"><button type="submit" data-theme="b">Yes</button></div>  
				</fieldset><!-- /grid-b -->
			</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 grille à trois colonnes avec un bouton dans chaque colonne.

Grille à quatre colonnes

Une grille à 4 colonnes, 25/25/25/25% est créée en spécifiant la classe class=ui-grid-c sur le parent et en ajoutant 4 blocs. Important : Ces blocs sont également stylisés à l'aide des classes de thèmes par conséquent ils sont clairement visibles.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille à quatre colonnes</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>Grille à quatre colonnes</h1>
			</div><!-- /header -->
			<div data-role="content">
				<div class="ui-grid-c">
					<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
					<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
					<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
					<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
				</div><!-- /grid-c -->
			</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 grille à quatre colonnes.

Grille à cinq colonnes

Une grille à 5 colonnes, 20/20/20/20/20% est créée en spécifiant la classe class=ui-grid-d sur le parent et en ajoutant 5 blocs. Important : Ces blocs sont également stylisés à l'aide des classes de thèmes par conséquent ils sont clairement visibles.

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille à cinq colonnes</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>Grille à cinq colonnes</h1>
			</div><!-- /header -->
			<div data-role="content">
				<div class="ui-grid-c">
					<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
					<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
					<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
					<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:120px">D</div></div>
					<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:120px">E</div></div>
				</div><!-- /grid-c -->
			</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 grille à cinq colonnes.

Grille comportant de multiples lignes

Les grilles sont conçues pour contenir de multiples lignes d'items. Par exemple, si vous spécifiez une grille à trois colonne (ui-grid-b) pour un conteneur renfermant 9 blocs enfant, il comportera 3 lignes incluant chacune 3 items. Il existe une régle CSS pour effacer les flottants et démarrer une nouvelle ligne lorsque la classe class=ui-block-a est lue, alors assurez-vous d'attribuer des classes de bloc selon une séquence répétitive (a, b, c, a, b, c, etc .) qui cartographie le type de grille : 

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille à lignes multiples</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>Grille à lignes multiples</h1>
			</div><!-- /header -->
			<div data-role="content">
				<div class="ui-grid-b">
					<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
					<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
					<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
					<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
					<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
					<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
					<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
					<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:120px">B</div></div>
					<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:120px">C</div></div>
				</div><!-- /grid-b -->
			</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 grille à lignes multiples.

Grille dans une barre d'outils pied de page

Les grilles sont utiles pour créer des mises en page au sein d'une barre d'outils. Voici un pied de page avec une grille comportant 3 colonnes :

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Grille dans une barre d'outils pied de page</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>Grille dans une barre d'outils pied de page</h1>
			</div><!-- /header -->
			<div data-role="content">
				Contenu de la page
			</div><!-- /content -->
			<div data-role="footer" data-theme="a" class="ui-bar ui-grid-c">
				<div class="ui-block-a"><h3 style="margin-top:10px;">Paramètres</h3></div>
				<div class="ui-block-b"><label for="value" style="margin:8px 10px 0 0; text-align:right;">Prix</label> </div>
				<div class="ui-block-c"><input id="value" value="5,000"></div>	 
				<div class="ui-block-d"><div style="margin:6px 0 0 10px;"><button type="submit" data-theme="b">Mise à jour</button></div></div>  
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Exemple de grille dans une barre d'outils pied de page.