Navigation sans rechargement de page via javascript (jQuery)
Ouaiisss, encore un tutoriel qui utilise jQuery ! (Contenez votre joie ! ^^)
Dans ce tutoriel, je vais vous montrez comment mettre en place une navigation sans rechargement de page sur votre site. Evidement grâce à l'aide je jQuery 🙂
Donc en gros, toutes vos pages se chargeront dans la page courante, exactement comme mes pages "A propos", "Archives", "Contact" et "Plan du site". Bon, allez jeter un oeil sur la demo ..
Préface
Pour arriver à ce résultat, je vais me servir des fonction AJAX de la librairie jQuery. Bon je dis AJAX mais ce n'est pas réellement le cas, parce qu'au lieu de charger du XML, nous allons simplement charger d'autres pages HTML (ou PHP, etc ...)
Avec ma technique, vous pourrez transformer la navigation de m'importe quel CMS en 3 lignes de code. Avec l'avantage de garder une navigation fonctionnelle pour ceux qui n'ont pas javascript activé (et aussi pour les moteurs de recherche).
Mais évidement tout n'est pas rose, car cette technique engendre des petits désagrément tel que:
- Barre d'adresse du navigateur qui ne change pas
- Pas d'historique (suivant, précédant, ...)
- Problème si vous charger une zone de texte sur laquelle un effet javascript est censé être appliqué sur sa page d'origine
Démonstration
- Page de démonstration (Télécharger l'exemple)
PS: Pour le chargement simple, j'ai mis une petite temporisation pour que vous ayez le temps de voir le "Chargement ..."
Installation
- 1. On inclu la librairie jQuery dans la page (si ce n'est pas déjà fait) entre les balises HTML
<head>et</head>
- 2. On ajoute les 2 fonctions de chargement AJAX
Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
* vous pouvez modifier la vitesse (slow, fast, 1500, ...)
* et l'effet (slideUp, fadeOut, ...) */
function ajax_page_advanced(ele,msg,url){
$(ele).slideUp("slow", function(){
$(ele).html(msg).show("slow", function(){
$(ele).load(url+" "+ele, null, function(){
var tampon = $(ele).html();
$(ele).html(msg).hide("slow",function(){
$(ele).html(tampon);
$(ele).slideDown("slow");
});
});
});
});
}
/* Fonction de chargement ajax simple */
function ajax_page(ele,msg,url){
$(ele).html(msg).load(url+" "+ele);
}
- 3. On applique la fonction de chargement AJAX sur un ensemble de liens
Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après jQuery.
$(document).ready(function(){
//Application du chargement ajax simple sur tous les liens se trouvant dans le conteneur "menu1"
$("#menu1 a").click(function(){
ajax_page('#swithcontenu','<p style="text-align: center">Chargement ...</p>',this.href);
return false;
});
});
Dans ce cas ci, j'active l'effet AJAX uniquement si l'on clique sur les liens se trouvant dans un élément d'id "menu1". Le contenu qui sera charger/remplacer se trouve dans l'élément d'ID swithcontenu
Configuration
Les fonctions prennent 3 paramètres:
- L'id de la balise à remplacer, donc la page que vous chargez doit aussi avoir une balise avec cette ID
- Le texte qui s'affiche pendant le téléchargement de la page (balises html acceptées)
- L'URL de la page à charger, dans mon exemple, il s'agit automatiquement de l'URL du lien sur lequel on clic
Bon ça peut paraitre un peu fouilli comme ça, mais en fouillant dans mon exemple à télécharger, vous devriez vite comprendre.
Conclusions
N'abusez pas de ce système, car il peut-être frustrant pour le visiteur de ne pas savoir sur quelle page il se trouve (pas de changement d'URL) et de ne pas voir accès au bouton "précédant". Du coup, moi je l'applique uniquement sur des liens secondaires (Page a propos, archives, etc ...).
-----
iTypo: thème Wordpress gratuit
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Pingback: Mes favoris de la semaine #15 | Blog sur L’actualité Multimédia du Web2.0()