Logo TouraineVerte

jQueryMobile pour mobiles smartphones tablettes

Comportement des liens dans jQueryMobile

Google Maps API Web Services

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

Formats et fonctionnement des liens

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

Pages & liens

jQuery Mobile est conçu pour fonctionner avec les conventions existantes concernant les liens. Essentiellement, vous pouvez lier des pages et des actifs comme vous le feriez normalement, et jQuery Mobile gérera automatiquement les requêtes de page dans un modèle de page unique, en utilisant Ajax lorsque cela est possible. Lorsque l'utilisation d'Ajax n'est pas possible (comme une url sur un domaine différent, ou si certains attributs sur le lien sont spécifiés), alors, à la place, une requête http normale sera utilisée.

L'objectif de ce modèle est de permettre aux développeurs de créer des sites Web en utilisant les meilleures pratiques - où des liens ordinaires "se contenteront de fonctionner" sans aucune configuration spéciale - tout en créant une expérience riche, semblable à l'originale qui ne peut pas être réalisée avec des requêtes HTTP standards.

Comportement des liens par défaut : Ajax

Pour activer les transitions animées entre pages, tous les liens qui pointent vers une page externe (exemple : products.html) seront chargés via Ajax. Pour faire cela de façon transparent, le framework analyse le href du lien afin de formuler une requête Ajax (Hijax) et afficher la file de chargement. jQuery Mobile fait tout cela automatiquement.

Si la requête Ajax est exécutée avec succès, le nouveau contenu de la page est ajouté au DOM, tous les widgets mobiles sont auto-initialisés, puis la nouvelle page vient s'afficher à l'écran à l'aide d'une transition animée.

Si la requête Ajax échoue, le framework affichera un petit message d'erreur en surimpression (stylisé avec l'échantillon "e") qui disparaîtra après un bref instant évitant ainsi de perturber le flux actuel de navigation. Voir un exemple de message d'ereur.

Liens sans Ajax

Les liens qui pointent vers d'autres domaines ou qui ont des attributs rel="external", data-ajax="false" ou target ne seront pas chargés avec Ajax. Au lieu de cela, ces liens provoqueront le rafraichissement de la page dans sa totalité sans aucune transition animée. Les deux attributs (rel="external" et data-ajax="false") ont le même effet, mais un sens sémantique différent : rel="external" doit être utilisé pour un lien vers un autre site ou un autre domaine, tandis que data-ajax="false" est utilisable pour opter simplement une page située dans votre domaine d'être chargée via Ajax. En raison des restrictions de sécurité, le framework choisit toujours des liens externes au domaine hors du comportement d'Ajax.

Remarque : Lors de la création d'une application jQuery Mobile où le système de navigation Ajax est désactivé à l'échelle mondiale ou fréquemment désactive sur les liens individuels, nous recommandons de désactiver l'option $.mobile.pushStateEnabled dans la configuration globale afin d'éviter des comportements de navigation incompatiblse dans certains navigateurs.

Liens au sein d'un document multi-page

Un seul document HTML peut contenir un ou plusieurs conteneurs de 'page's correspondant à un empilement de balises <div/> dont le data-role est "page". Ceci vous permet de construire un petit site ou une application dans un seul document HTML; jQuery Mobile affichera seulement la première 'page' qu'il trouvera en premier dans le code source de la page lors de son chargement.

Si un lien dans un document multi-page pointe vers une ancre (#foo), le framework cherchera un conteneur page ayant cet ID (id="foo"). S'il trouve une page dans le document HTML, la nouvelle page s'affichera via une transition. Vous pouvez parfaitement naviguer entre des pages locales, des "page"s internes et des pages externes avec jQuery Mobile.Les deux sembleront identiques pour l'utilisateur final sauf que les pages externes afficheront la file Ajax pendant le chargement. Dans les deux cas, jQuery Mobile met à jour le hash URL des pages pour activer le support du bouton "Précédent", les liens profonds et la mise en favoris.

Il est important de noter que si vous faites un lien depuis une page mobile qui a été chargée via Ajax vers une page qui contient des pages internes multiples, vous devrez ajouter rel="external" ou data-ajax="false" au lien. Ceci indique au framework de recharger la page totalement pour vider la table de hachage dans l'URL. Cela est essentiel car les pages Ajax utilisent le hash (#) pour suivre l'historique Ajax, tandis que les pages internes mutiples utilisent le hachage pour indiquer les pages de sorte qu'il y aura des conflits dans le hachage entre ces deux modes.

Par exemple, un lien vers une page contenant des pages internes multiples devra ressembler à ceci :

<a href="multipage.html" rel="external">Lien vers multi-page</a>

Lien Précédent

Si vous utilisez l'attribute data-rel="back" sur un lien, tout click sur ce lien imitera le comportement d'un bouton "Précédent", en remontant d'une entrée dans l'historique et en ignorant le 'href' par défaut de ce lien. Ceci est particulièrement utile pour créer un lien "Précédent" vers une page nommée, tel qu'un lien redirigeant vers la page "Accueil", ou lors de la génération d'un bouton "Précédent" avec JavaScript, tel un bouton pour fermer une boite de dialogue. Lorsque vous utilisez cette fonctionnalité dans votre code, assurez-vous de fournir un href significatif qui pointe en réalité vers l'URL de la page de référence (ceci permettra à cette fonctionnalité de fonctionner dans des navigateurs de catégorie C. Gardez également à l'esprit que si vous désirez juste une transition inverse sans retourner dans l'historique, vous devez utiliser à la place l'attribut data-direction="reverse".

Redirections et liens vers les répertoires

Lors d'une liaison vers l'index d'un répertoire (comme href="typesofcats/" au lieu de href="typesofcats/index.html"), vous devez fournir un slash final. Cela est dû au fait que jQuery mobile considère que la section située après le dernier caractère "/" dans une URL est un nom de fichier, et il va supprimer cette section lors de la création des URLs de base à partir desquelles les futures pages seront référencées.

Cependant, vous pouvez contourner ce problème en retournant votre page div avec un attribut data-url déjà spécifié. Lorsque vous procédez ainsi, jQuery Mobile utilisera la valeur de cet attribut pour la mise à jour de l'URL, au lieu de l'URL utilisée pour demander cette page. Cela vous permet également de revenir URL qui changent à la suite d'une redirection, par exemple, vous pourriez envoyer un formulaire à "/login.html", mais renvoyer vers une page dont l'URL serait "/compte" une fois la soumission du formulaire réussie. Cet outil vous permet de prendre le contrôle de la pile historique de jQuery mobiles dans ces situations. Voici un exemple :

Le lien suivant pointe vers "docs-links-urltest/index.html": Lien Test qui est un répertoire avec une page index. La page retournée mettra à jour le hachage ainsi "/docs/pages/docs-links-urltest/" avec un slash final. Cela se fait grâce à l'attribut data-url situé dans le code source de cette page. Gardez à l'esprit que cette valeur remplacera le hash entier, et c'est à vous de le remplacer par une URL qui dirige réellement vers la bonne page lorsqu'elle sera demandée à l'aide d'un rafraichissement ou d'un lien profond.

En savoir plus sur les détails techniques du modèle de navigation et Ajax, hashes et historique dans jQuery mobile.

Exemples de liens

Tous les types de lien HTML standards sont supportés par jQuery Mobile en plus des types décrits ci-dessus.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jQuery mobile échantillons de liens</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>Exemples de liens sous jQuery mobile</h1>
			</div><!-- /header -->
			<div data-role="content">
				<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
				<li data-role="list-divider">Liens qui sera chargé via Ajax avec transition entre pages</li>
				<li><a href="../../index.html">Liens dans le même domaine</a></li>
				<li><a href="../pages/dialog.html" data-rel="dialog">Lien dialogue: data-rel="dialog" (pas de suivi dans l'historique)</a></li>
				<li data-role="list-divider">Liens qui vont rafraîchir la page</li>
				<li><a href="http://www.jquery.com">Externe au domaine</a></li>
				<li><a href="../../index.html" rel="external">Lien avec rel="external"</a></li>
				<li><a href="index.html" data-ajax="false">Lien avec [data-ajax="false"]</a></li>
				<li><a href="../../index.html" target="foo">Lien avec target="foo"</a></li>
				<li data-role="list-divider">Liens pour Mails</li>
				<li><a href="mailto:jdoe@foo.com">Email basique: mailto:jdoe@foo.com</a></li>
				<li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto avec cc:, bcc:, objet et corps pré-remplis</a></li>
				<li data-role="list-divider">Liens téléphoniques :</li>
				<li><a href="tel:15555555555">Téléphone: tel:15555555555</a></li>
				<li data-role="list-divider">Autre</li>
				<li><a href="#">Un href="#" retournera false</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 : Exemples de liens communs avec jQuery Mobile