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
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 ...).
-----
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 !
Ajouter un lien pour envoyer la page par e-mail
Allez, puisque j’en suis à parler tout seul ici, je vais continuer car j’ai trouvé un petit défaut.
Sur IE avec la version Advanced, le texte perd de son épaisseur, c’est la même taille de police mais on dirait que c’est compressé alors que nous n’avons pas ce problème avec FF (3 du moins), ce qui rend le texte bien moins lisible.
Lancez la démo du billet avec IE et FF, cliquez sur le menu test 2 et cliquez sur le menu test 3, vous verrez la différence sous IE et aucune sous FF.
Bien sûr, je n’ai aucune idée de la provenance de ce « soucis » mais au moins j’ai exposé le problème
Si vous avez une piste, je ne suis pas contre l’idée de l’écouter.
Formidable !
J’ai même pu l’utiliser avec l’url-rewriting.
Bon, j’ai parlé un peu vite, car j’ai moi aussi un soucis avec les accents. Je suis chez OVH et voici les balises meta dans le head :
Quelqu’un saurait-il d’où peut venir le soucis ?
Hm… Les balises ne passent pas dans les commentaires, mais vous pouvez afficher le code source de mon site en cliquant sur mon pseudo.
Je peux dire que votre méthode a été utilisé par des professionnels et ce de façon, euh comment dire.. A juger par vous même en désactivant le javascript :
http://www.lesdomainessaintaugustin.com/index.php
Je n’arrive pas à utiliser la fonction javascript:
onload= »javascript:window.open(‘http://www.microsoft.com’) »;
Qulqun serait me dire pourquoi et comment résoudre le problême ???
Bedankt!
Max
( je précise que tout ca se situe bien là ou il faut entre les balises body, div s d’appel et script …
Bonjour,
J’ai utilisé ce script, mais je voulais inserer du php dans la partie:
j’ai donc recreer une page ( ex : page3.php ) et inserer dans la div :
la page au clik reste bloqué a Chargement ….
ok les balises code ne saffiche pas .. donc je disais ..
J’ai voulu inserer dans la div avec id= swithcontenu
Est ce qu’on peut inserer des flash swf dans les pages qu’on genere en ajax?
Bonjour,
Je viens de tester cet exemple, mais si j’appelle une page PHP, le résultat ne s’affiche pas… pourtant quand je regarde dans la console Firebug, la réponse de ma page php et OK et je vois le résultat!!!
Auriez vous une idée?
Merci
Script intéressant, je vais essayer d’utiliser cette fonction sur mon site !
Bonjour, j’ai appliquer avec succès cette méthode pour naviguer depuis mon ma page d’accueil vers d’autres pages de mon site, mais lorsque ces pages appelées en ajax font appel à des fonctions jquery, celles-ci ne sont pas interprétées ! Mon exemple est le suivant, j’appelle une page sur laquelle je charge une galerie photo (gallerific), la galerie ne se crée pas. Si j’appelle cette page sans ajax, tout fonctionne. Comment faut-il résoudre ce problème ? Merci d’avance.
yes, j’aime, ça marche bien.
Bonjour,
Nicolas j’aurai voulu savoir si tu avais trouvé la réponse à ta question car il m’arrive le même problème ?
Merci d’avance