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

Barre d'outils entête et pied de page fixes ou persistants

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

Barre d'outils fixe qui réapparaît après défilement

Ceci est une démonstration d'en-têtes et pieds de page fixes ("fixed") utilisés dans le framework jQuery Mobile. Le contenu de la page s'affiche naturellement, nous permettant de profiter du défilement natif au lieu d'un script offrant une solution de contournement de type faux-scrolling. Les <div/> entête et pied de page évoluent dans le flux du document, mais chaque fois qu'ils sont hors de vue, le framework les re-positionnera dynamiquement dans la vue si le navigateur supporte cette fonctionnalité, sinon ils resteront tout simplement en ligne (inline).

Pour activer ce comportement sur l'entête ou le pied de page, ajoutez l'attribut data-position="fixed" au conteneur de la barre d'outils.

Appuyez sur l'écran pour activer la visibilité

Pour modifier la visibilité des barres d'outils fixes, appuyez sur l'écran. Par exemple, si les barres d'outils fixes sont visibles, appuyez sur l'écran pour cacher les barres d'outils et ainsi profiter pleinement de la surface d'affichage pour le contenu. En tapant de nouveau sur l'écran vous allez ré-afficher les barres d'outils.

Il est possible d'empêcher ce comportement grâce à ce code :

$.mobile.fixedToolbars.setTouchToggleEnabled(false);

Mise à jour du positionnement de la barre d'outils

Si la hauteur de la page change, soit par injection dynamique de code, ou par le masquage ou le rétrécissement de widgets, il peut rejeter le positionnement dynamique des barres d'outils. Pour demander manuellement à la barre d'outils de se repositionner à l'issue d'un fade in (effet de fondu), utilisez $.mobile.fixedToolbars.show();. Pour les faire apparaître immédiatement, sans fondu:

$.mobile.fixedToolbars.show(true);

Il existe également un événement UpdateLayout qui peut être utilisé pour déclencher le ré-positionnement des barres d'outils. Les développeurs qui créent des applications dynamiques qui injectent du contenu dans la page en cours peuvent également déclencher manuellement cet événement UpdateLayout pour assurer la mise à jour des composants sur la page en réponse au nouveau contenu qui vient d'être ajouté. Cet événement est utilisé en interne dans les plugins de filtre collapsible et listview et est puissant parce qu'il n'est pas spécifique à la barre d'outils - n'importe quel widget peut être construit en écoutant l'événement UpdateLayout pour mettre à jour le widget en réponse.

Limitations connues

jQuery Mobile utilise dynamiquement le re-positionnement des barres d'outils pour l'effet d'en-tête fixe, car très peu de navigateurs pour mobiles supportent la propriété CSS position: fixed. Bien que notre fonctionnalité de barre d'outils fixe fonctionne assez bien, il existe un certain nombre de limitations techniques qui peuvent causer les barres d'outils apparaissent pour faire défiler avec la page. La plupart de ces problèmes de rendu sont dûs au fait que de nombreuses plates-formes mobiles (iOS, Android, etc) prennent essentiellement une capture d'écran statique de la page et affichent cette image pendant le défilement au lieu du rendu réel HTML. Cela améliore les performances du défilement, mais quand arrive le défilement rapide, les barres d'outils seront "brûlées" dans la capture d'écran de la page avant que notre script puisse les cacher afin qu'ils apparaissent pour faire défiler avec la page. Nous avons optimisé cela autant que nous avons pu, mais il va y avoir des situations où les barres d'outils fixes ne fonctionneront pas parfaitement à cause des limitations du navigateur, il est donc important de le noter lorsque vous examinerez la possibilité d'utiliser cette fonctionnalité.

Véritable barre d'outils fixe : touchOverflowEnabled

Afin d'obtenir de véritables barres d'outils fixes, un navigateur a besoin de supporter soit position:fixed soit overflow:auto. Heureusement, cet appui vient à plates-formes mobiles, nous pouvons donc atteindre cet objectif avec les standards du web. Dans jQuery Mobile, nous avons ajouté une fonctionnalité globale appelée touchOverflowEnabled qui exploite la propriété CSS overflow:auto sur les plates-formes prises en charge comme iOS5. Lorsqu'elle est activée, le framework encapsule chaque page dans un conteneur avec son défilement interne. Ceci nous permet de positionner les barres d'outils à l'extérieur du corps de défilement pour vraiment rester fixes en place en tout temps. En savoir plus sur cette fonctionnalité sur la page des options globales ou démo cette fonctionnalité (seul iOS5 actuellement, d'autres navigateurs se rabattront sur les barres d'outils fixes repositionnées dynamiquement).

Le reste de cette page est juste un échantillon de contenu pour rendre la page très longue

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.

Exemple de liste

<!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">
				<ul data-role="listview" data-inset="true">
					<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
					<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
					<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
					<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
					<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
				</ul>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Barre fixe - liste.

Formulaire

<!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">
			<form action="#" method="get">
				<div data-role="fieldcontain">
					<label for="name">Text Input:</label>
					<input type="text" name="name" id="name" value=""  />
				</div>
				<div data-role="fieldcontain">
					<label for="textarea">Textarea:</label>
					<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
				</div>
				<div data-role="fieldcontain">
					<label for="slider2">Flip switch:</label>
					<select name="slider2" id="slider2" data-role="slider">
						<option value="off">Off</option>
						<option value="on">On</option>
					</select>
				</div>
				<div data-role="fieldcontain">
					<label for="slider">Slider:</label>
					<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
				</div>
				<div data-role="fieldcontain">
					<label for="select-choice-1" class="select">Choose shipping method:</label>
					<select name="select-choice-1" id="select-choice-1">
						<option value="standard">Standard: 7 day</option>
						<option value="rush">Rush: 3 days</option>
						<option value="express">Express: next day</option>
						<option value="overnight">Overnight</option>
					</select>
				</div>
				<div class="ui-body ui-body-b">
					<fieldset class="ui-grid-a">
						<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
						<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
					</fieldset>
				</div>
			</form>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir le résultat : Barre fixe - Formulaire.

jQueryMobile pour mobiles smartphones tablettes

Rendre fixe le header et footer jQueryMobile

Google Maps API Web Services