Un menu chargeant le contenu dynamiquement
Au détours des forums spécialisés, nous nous trouvons souvent avec cette demande : "Comment réaliser un menu chargeant le contenu du site en Ajax ?"
l'intéret :
- charger du contenu sans pour autant recharger le design (souvent très lourd),
- proposer un certain dynamisme, dans la navigation,
- faciliter la maintenance du "template" ...
les problèmes régulièrement soulevés :
- le référencement des contenus chargés est bien plus délicat, la compatibilité avec les différents navigateurs, est un vrai Chalenge, l'accessibilité ... est un concept à oublier, dans l'état, il est impossible de faire entrer un internaute par une autre page que l'accueil ...
Il est possible de résoudre une partie de ces désagrément grâce à de petites fonctions php et une UrlRewriting, mais ce n'est pas l'objet, aujourd'hui !! Nous pourrons y revenir dans un second temps !!
Nous allons donc créer un simple menu sous forme de liste avec pour classe "menu" et une zone de texte avec pour identifiant unique "content"
Pour ce faciliter la vie, je vais m'appuyer sur la librairie prototype à télécharger et héberger dans un dossier nommé js/ placé à la racine de votre site internet. Je vous conseil, au passage de jeter un oeil sur les fonction il est toujours utile de bien maitriser son code !!
Notre première page, contenant notre template, placèe à la racine de notre site se nomme index.html et contient :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mon test !</title>
<script src="http://js/prototype.js" type="text/javascript"></script>
<script type="text/javascript"></script>
</head>
<body>
<ul id="menu">
<li>
<a href="index.html" class="menu">accueil</a>
</li>
<li>
<a href="page_1.html" class="menu">page 1</a>
</li>
<li>
<a href="page_2.html" class="menu">page 2</a>
</li>
</ul>
<div id="content"><!-- placer ici votre texte (issus de la page default.html) --></div>
</body>
</html>
Notre contenu par défaut peut être inclus automatiquement grâce à une fonction PHP sinon, vous pouvez aussi l'inscrire en "dur" et en faire un double, placé dans le fichier default.html
Nous allons nous servir d'une fonction JavaScript pour shunter les attributs href par des écouteurs (listener) en charge d'appeler une autre fonction js au moindre click sur le lien.
function construct(){
var tableLiens = $$('a.menu');// vas créer un tableau avec toutes les balises <a> ayant comme classe "menu"
for(j=0; j<tableLiens.length; j++){
var lien = tableLiens[j].readAttribute('href');
lien = lien.substring(lien.lastIndexOf('/')+1);// récupération du lien symbolique
if(lien == "index.html")
tableLiens[j].href = "default.html"; // rappelons que nous ne pouvons charger notre page index.html car elle contient notre template !!
tableLiens[j].observe('click', charger); // on place notre écouteur sur l'élément, à chaque click, il appellera la fonction charger()
}
}
Nous devons maintenant réaliser notre fonction charger(), et là encore, nous allons nous appuyer sur prototype, qui gère ça très simplement !!
function charger(e){ // e représente l'événement lié à l'appel de cette fonction
e.stop(); // on interrompt l´évènement pour ne pas que la page soit rechargée !
var el = e.element(); // l'élément sur lequel nous avons clické !
var url = el.readAttribute('href');
new Ajax.Request(url, {
onComplete: function(xhr) {
$('content').innerHTML = xhr.responseText;
}
});
}
et la fonction déclenchant tout ceci :
document.observe('dom:loaded', construct);
Et voila ... il ne reste plus qu'à placer les Javascript dans la balise prévue à cet effet dans le <head> Pour voir cet exemple en ligne : c'est ici ;)
Par contre, vous l'aurez compris, la réponse reçu par la fonction Ajax étant directement injectée dans notre div#content, nous ne pouvons nous retrouver avec des balises <body><head> ou autre !!
Les pages default.hml, page_1.html et page_2.html doivent impérativement ne contenir que le code pouvant se trouver dans la <div>#content !
<p> Nous pouvons y mettre du texte <span style="color:RED">Mis en forme</span> mais aussi des images
<img src="http://4code.fr/imgs/diablotin_Nours312.png" title="Nours On 4ode.fr"/></p>
<div> Mais aussi des divs, des tables et tous types de code HTML pouvant être contenu au sein de notre div#content</div>
... C'est ainsi que ce termine cette petite explication de l'utilisation rapide de l'Ajax, pour charger un contenu !!
Un de ces 4, je terminerais ce topic en vous présentant la manière à employer pour faire 2 sites en un : un qui semble normal (chargement du template à chaque page) et pour ceux qui peuvent, utilisation de l'ajax ... nous utiliserons exactement le même code que celui-ci, mais nous interviendrons en php dans la construction de la page ...
@+ &BonCode ;)