javascript

Liens avec ou sans Ajax

Je suis récemment tombé sur un article expliquant clairement comment construire les liens d’un site mobile en fonction de son utilisation.

Dans certains cas, il peut s’avérer utile de ne pas utiliser le chargement d’une page via l’ajax.

Les deux méthodes ont leurs avantages et inconvénients.

Je vous laisse découvrir en détail les façons d’utiliser ces méthodes ainsi que leurs fonctionnements.

Le lien suivant ne fonctionnant plus, j’ai retrouvé le texte de cette page :

http://jquery-mobile.touraineverte.com/demos/1.0/docs/pages/page-links.html#Liens_Sans_Ajax

[source]

Pages & liens

jQuery Mobile est conçu pour fonctionner avec des conventions liant simple page. 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, utilisant Ajax, si possible. Lorsque l’utilisation Ajax n’est pas possible (comme une url sur un domaine diférent, ou s’il l’utilisation de certains attributs sur le lien est spécifiée), une requête http normale sera utilisée à la place.

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 « fonctionneront simplement » sans aucune configuration spéciale – tout en créant une expérience riche, semblable à l’originale qui ne peut être réalisée avec des requêtes HTTP standards.

Comportement des liens par défaut : Ajax

Afin de permettre des transitions animées entre pages, tous les liens qui pointent vers une page externe (exemple : products.html) seront chargés à l’aide d’Ajax. Pour faire cela de façon discrète, le framework parse 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 de navigation actuel.

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 et provoqueront le rafraichissement de la page dans sa totalité sans aucune transition animée. Les deux attributs ont le même effet, mais un sens sémantique différent. rel="external" devrait être utilisé pour un lien vers un autre site ou un autre domaine, tandis que data-ajax="false" utilisable pour simplement opting une page située dans votre domaine d’être chargé 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é ou fréquemment désactivé sur les liens individuels, nous recommandons de désactiver l’option $.mobile.pushStateEnabled dans la configuration globale afin d’éviter des comportements de navigation incompatible 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>

Liens 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 fonctionne 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 :

Par exemple un lien pointant vers « docs-links-urltest/index.html » retournera le hachage « /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.