Il permet aussi de spécifier des éléments qui ne seront rechargés qu’en cas de changement de langue.
En clair, imaginons que nous sommes sur la page de sommaire de votre site, et qu’on clique sur un lien vers l’article no123. Le navigateur recharge alors la page en entier, y compris des éléments qui restent identiques, comme le pied de page ou l’en-tête. Avec “Navigation AJAX”, vous pouvez définir que la seule partie à recharger est l’intérieur de la balise div qui a l’id “contenu”. Le click sur le lien provoque alors un chargement AJAX de cette balise.
Le problème avec ce genre d’approche est que lorsqu’on charge la page de cette façon, l’URL de la barre d’adresse ne change pas. Dans notre exemple, l’utilisateur qui veut partager un lien vers l’article no123 enverra alors ses amis vers votre page de sommaire. Ce plugin règle ce problème en utilisant l’API History fournie par les navigateurs HTML5. Pour les utilisateurs dont le navigateur ne supporte pas cette API, on a le choix entre ne pas utiliser de chargements AJAX et utiliser une astuce avec des hashes (#) dans l’url comme le font des sites comme twitter par exemple.
Utiliser ce plugin a plusieurs avantages :
- Comme la page n’est jamais complètement rechargée par le navigateur, la navigation est plus fluide et réactive.
- Cela permet de réduire considérablement la quantité de données échangées entre votre serveur et l’utilisateur, ce qui accélère notablement le chargement des pages et économise la bande passante.
- Pour certaine utilisations particulières, comme par exemple un site de radio, cela permet un plus grand confort d’utilisation. On peut s’arranger pour ne jamais recharger la liste de lecture et les visiteurs peuvent alors changer de page sans interrompre la musique.
Il semblerait qu’une fonctionnalité similaire sera disponible nativement dans SPIP3, mais en attendant, plus rien ne vous empêche de profiter des avantages de cette approche !
Configuration
Pour fonctionner, ce plugin doit être correctement configuré. La page de configuration est accessible depuis la page des plugins, qui nous amène au formulaire de configuration :
- Les types de page : Ce réglage permet de spécifier les types de liens qui seront traités. Le réglage dans la capture d’écran ci-dessus signifie que tous les liens vers le sommaire, vers un article ou vers une rubrique seront chargés en AJAX. Par contre, les liens vers une page de mot-clé ou vers la page de login seront laissé intacts et fonctionneront comme d’habitude.
- Les ids des divs à charger en AJAX : Le réglage de la capture d’écran signifie que les divs ayant comme id “contenu” et “spip-admin” seront rechargés en AJAX. Vous devriez toujours laisser “spip-admin” dans ce champ, puisqu’il s’agit des boutons affichant les statistiques et le bouton “recalculer” qui s’affichent lorsqu’un contributeur du site est connecté.
- Les ids des divs à recharger en cas de changement de langue : Ce réglage est utile pour les sites multilingues. Pour que ceci fonctionne correctement, il est impératif de placer un attribut lang à la balise html.
- Activer les urls hash : Activez cette option si vous voulez que vos visiteurs qui utilisent des vieux navigateurs profitent aussi de la navigation AJAX. Ce choix ne devrait pas être pris à la légère, puisqu’il induit des problèmes. Par exemple, si un de vos visiteurs sur IE7 transmet un lien à quelqu’un qui a bloqué le Javascript, le lien ne l’enverra pas sur la bonne page. N’activez cette fonction que si le fonctionnement de votre site dépend fortement de la navigation AJAX, et que vous jugez que les inconvénients en valent la peine. Pour plus d’infos sur les problèmes crées en cochant cette option sur cette page (page en anglais).
- Remplacer les divs automatiquement : Si cette option est désactivée, les divs ne seront rechargées que lors d’événements javascript que vous devrez vous-même déclencher (voir plus bas).
Effets pré- et post-chargement
Si vous souhaitez utiliser des effets Javascript pour animer les chargements AJAX, vous pouvez vous appuyer sur les événements “onAjaxNavReq”, “onAjaxNavLoad” et “onAjaxNavLocalisedLoad”, qui sont déclenchés respectivement avant un chargement, après un chargement normal et après un chargement avec changement de langue. Ces événements sont déclenchés par chacun des éléments concernés, ce qui vous permet d’assigner des effets différents à chaque élément.
Par exemple, si vous voulez un effet de fondu sur la balise avec id “contenu” lors d’un chargement, vous pouvez utiliser le code Javascript suivant :
$('#contenu').bind('onAjaxNavReq',function () {
$('#contenu').animate({opacity: 0}, 'fast');
});
$('#contenu').bind('onAjaxNavLoad',function (){
$('#contenu').animate({opacity: 1}, 'fast');
});
Ou alors, si votre menu est rechargé en cas de changement de langue, et qu’il a des effets Javascript que vous avez groupés dans une fonction appelée “attachMenuFx”, chaque changement de langue va abimer vos beaux effets. Dans ce cas utilisez le code suivant :
$('#menu').bind('onAjaxNavLocalisedLoad', attachMenuFx);
Chargement contrôlé
Si vous utilisez des effets de transition entre les pages, il se peut que l’effet de la page sortante ne soit pas tout à fait terminé avant que celle-ci ne soit remplacée par la page entrante. La transition n’est alors pas très fluide, et cela peut être très dérangeant suivant l’effet utilisé. Pour remédier à ce problème, il est possible de contrôler soi-même le remplacement de la page en déclenchant l’événement javascript “ajaxNavReady”. Pour ceci il faut désactiver l’option “remplacer les divs automatiquement”. Vous pouvez ensuite utiliser un code du genre :
$('#contenu').bind('onAjaxNavReq',function () {
$('#contenu').animate(
{opacity: 0},
{
duration : 'fast',
complete: function () {
$(this).trigger('ajaxNavReady');
}
});
});
$('#contenu').bind('onAjaxNavLoad',function (){
$('#contenu').animate({opacity: 1}, 'fast');
});
Si vous avez des divs qui ne sont pas animées, vous pouvez utiliser le code suivant pour déclencher leur remplacement :
$('#maDiv').bind('onAjaxNavReq'), function () {
$(this).trigger('ajaxNavReady');
});
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |