SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 119 visiteurs en ce moment

Accueil > Navigation > Navigation AJAX > Navigation AJAX

Navigation AJAX

31 janvier 2012 – par bystrano – 60 commentaires

4 votes

Ce plugin permet de modifier automatiquement une parties des liens internes de manière à ce qu’ils ne déclenchent pas un chargement complet de la page cible, mais un chargement en AJAX de certains éléments spécifiés à l’avance.

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 :

  1. $('#contenu').bind('onAjaxNavReq',function () {
  2.  $('#contenu').animate({opacity: 0}, 'fast');
  3. });
  4. $('#contenu').bind('onAjaxNavLoad',function (){
  5.  $('#contenu').animate({opacity: 1}, 'fast');
  6. });

Télécharger

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 :

  1. $('#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 :

  1. $('#contenu').bind('onAjaxNavReq',function () {
  2.  $('#contenu').animate(
  3.   {opacity: 0},
  4.   {
  5.    duration : 'fast',
  6.    complete: function () {
  7.     $(this).trigger('ajaxNavReady');
  8.    }
  9.  });
  10. });
  11. $('#contenu').bind('onAjaxNavLoad',function (){
  12.  $('#contenu').animate({opacity: 1}, 'fast');
  13. });

Télécharger

Si vous avez des divs qui ne sont pas animées, vous pouvez utiliser le code suivant pour déclencher leur remplacement :

  1. $('#maDiv').bind('onAjaxNavReq'), function () {
  2.  $(this).trigger('ajaxNavReady');
  3. });

Télécharger

Voir en ligne : https://plugins.spip.net/ajax_nav

P.-S.

Ce plugin fait une utilisation intensive de la librairie History.js, un grand merci à son auteur ! J’ai aussi utilisé la librairie Javascript Modernizr et la librairie phpQuery. Ces librairies sont inclues dans le plugin, donc pas besoin de vous en soucier.
Et évidement merci à toute la communauté SPIP pour ce fabuleux logiciel et sa multitude de contributions !

Note pour SPIP3

Une grande part de ces fonctionnalités sont intégrées dans SPIP3 de manière native, avec le critère {ajax } notamment :
-  voir la documentation sur spip.net
-  voir http://programmer.spip.org/-Ajax-
-  voir la discussion Charger une div externe en ajax et notamment la réponse

Dernière modification de cette page le 11 novembre 2017

Retour en haut de la page
Chargement en cours...

Ça discute par ici

  • PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Galleria (fr)

    16 novembre 2011 – 192 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)

  • ScolaSPIP 4

    19 janvier 2016 – 371 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Newsletters

    16 janvier 2013 – 474 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 16 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)