 |
Publicité 
|
Seulement le système se limite généralement à afficher des pages déjà vu en se référant à l’historique du navigateur. Il est incapable de naviguer entre les pages du site. La solution serait de modifier l’adresse de toutes les pages les unes après les autres au niveau des boutons précédent et suivant. Cela peut être simplifié en utilisant le JavaScript. Le principe est de déterminer le nom de la page actuelle et de chercher sa position dans un référenciel afin de rediriger l’utilisateur vers la page qui la précède ou celle qui la succède.
- Déclarez la barre de navigation entre les balises <body></body>
Dans notre exemple on a déclaré :
<!--#include virtual="vinclude/nav.shtml"-->
“include virtual” permet d’inclure un fichier.
”vinclude/navt.shtml” est le chemin du fichier html.
- Déclarez les fonctions précédent et suivant dans le html de navigation
Voici le code qui se trouve dans le fichier html qui affiche la barre de navigation :
<a href="javascript:nav(-1);">Précédent</a>
<a href="sommaire.html">Retour à la liste</a>
<a href="javascript:nav(1);">Suivant </a>
“JavaScript:nav(-1)” : fonction de la fonction de navigation pour la page précédente
“JavaScript:nav(1) “ : fonction de la fonction de navigation pour la page suivante
- Déclarez le fichier JavaScript entre les balises <head></head>
Le principe du fichier JavaScript est de rechercher dans un tableau répertoriant les fichiers html (ou pages), la position du fichier html actuel. Suivant son nom, le programme sera en mesure de déterminer quel est le fichier html qui le précède et quel est le fichier html qui lui succède. Ainsi, il pourra afficher la bonne page sans avoir recours à l’historique du navigateur (history.go(-1) ..
Dans notre exemple on a déclaré :
<script src="nav.js" language="javascript" type="text/javascript"></script>
“nav.js“ : fichier JavaScript contenant la fonction de navigation et l’initialisation des données.
- Déclaration de la fonction JavaScript
var source="page1.shtml, page2.shtml, page3.shtml, page4.shtml, page5.shtml, page6.shtml";
var navigation=source.split(",")
function navt(sens) {
t=self.location.pathname;
t=t.split("/");
ref=t[t.length-1];
i=0;
while (i< navigation.length && ref!= navigation[i]) i++;
i=i+sens
if (i>=0 && i< navigation.length) self.location= navigation[i];
}
“source" : variable contenant les pages
“ navigation“ : tableau contenant les éléments de la variable “source“
Dans notre exemple la fonction de navigation s’appelle “nav“ :
function nav(sens)
- “t“ sert à définir le nom du fichier html actuel.
- “t=self.location.pathname;“ , “t“ détermine l’adresse du fichier en excluant le protocole et le nom de domaine.
- “t=t.split("/");“ permet de séparer les éléments contenus entre les /.
- “ref=t[t.length-1]; “ sert à prendre le dernier élément du chemin, c’est à dire le nom du fichier html.
- “ i=0;“ on initialise i à 0.
- “(i< navigation.length && ref!= navigation[i]) i++; “Tant que i est inférieur à la longueur du tableau navigation, c'est-à-dire inférieur à 5 (i < navigation.length) et que ref (html actuel) est différent de sa valeur dans le tableau navigation (& ref !=navigation[i]), alors faire i+1 (ou i suivant) (i++)
- “ i=i+sens “ i correspond à la position de la page courante dans le tableau des pages, on ajoute sens à cette valeur afin de se déplacer dans le tableau vers la page suivante (+1) ou la page précédente (-1)
- “if (i>=0 && i<navigation.length) self.location=navigation[i];“ Si i correspond à une page du tableau (i est supérieur ou égal à 0 et que i est inférieur à la longueur du tableau), alors on définit la nouvelle url de l’objet location à la page indiquée par le tableau en position i
Note : On note qu’il suffit de modifier le contenu de la chaine source pour mettre à jour la navigation pour l’ensemble des pages concernées.
|
