Menu dynamique avec JSON
Ce composant permet de charger une liste de pages que vous aurez créées
sur votre futur site web et de construire un menu à partir de là.
Plus tard nous lui donneront un design un peu plus élégant,
grâce à une feuille de style, mais pour l'instant, il est suffisant
pour ajouter une nouvelle brique à notre CMS. Il nous faut juste ajouter
une ligne au fichier JSON quand une nouvelle page est créée,
pour compléter le menu.
Ajax
Il s'agit d'un script Ajax, ce qui a l'avantage de nous libérer de tout langage de programmation coté serveur. Une simple fonction Ajax permet de créer l'objet XHR.
Le fichier JSON
Ce fichier, et c'est là l'intérêt du menu dynamique, peut être généré automatiquement par une application, notamment lorsqu'un nouvel article est créé et que nous voulons l'ajouter au sommaire.
Le script de menu
Ce script est inclut dans la section head de la page de démonstration, et appelé au chargement de celle-ci par l'évènement onload:
window.onload=loadJSON
Il comporte deux fonctions:
- loadJSON
- Elle appelle la fonction de création d'objet XHR et charge le fichier dans l'attribut responseTxt. Le contenu de celui-ci est alors donné en paramètre de la fonction buildMenu appelée en callback (son nom est un argument de la fonction loadJSON).
- buildMenu
- Elle démarre par l'appel de la fonction eval() qui transforme ce
fichier de texte donné en argument en objet JavaScript.
Puis l'objet est parcouru de façon itérative (il pourrait l'être de façon récursive si l'on voulait avoir des sous-menus).
La balise de stockage est trouvée par la fonction DOM getElementByID et on ajoute à son contenu l'élément de menu suivant en l'assignant à l'attribut innerHTML.
Ce script fonctionne aussi bien sur un ordinateur local sans serveur.
La démonstration
Cette démonstration affiche un menu qui est défini dans le fichier JSON dynamic-menu.json.
Cela grâce au script JavaScript menu.js
qui est lié dans la section head de la présente page.
C'est un script Ajax, il utilise la fonction définie dans le fichier
ajax.js.
La démo affiche automatiquement le menu au chargement de la page.