voici le script:
// JavaScript Document
// Menu de profondeur variable
var fichier = 0;
var dossier = 1;
var nb = 0;
var Menu = new Array();
// Construction du menu, attention à l'ordre.
// 4 arguments :
// - le type : dossier ou fichier
// - la profondeur
// - le texte
// - le lien
//Creation des objets à mettre dans l'arbre
tab= new Array();
tab["nom"]="Arbre";
tab[0]= new Array();
tab[0]["nom"]="racine1";
tab[0][0]= new Array();
tab[0][0]["nom"]="fils 1";
tab[0][0][0]="sous fils 1";
tab[0][0][1]="sous fils 2";
tab[0][1]="fils 2";
tab[0][2]="fils 3";
tab[1]= "bibi"
//Demande d'affichage de l'arbre de racine tab
Afficher(tab,0);
//fonction récursive permettant d'afficher l'arbre de manière générique
function Afficher(tab, prof)
{
window.alert("Ajouter(dossier," +prof+ "," +tab["nom"]+ ",#);");
Ajouter(dossier,prof,tab["nom"],"#");
for (i=0;i<tab.length;i++){
if (tab[i]["nom"])
{
//window.alert(tab[i]);
Afficher(tab[i],(prof+1));
}
else
{
window.alert("sans fils Ajouter(fichier," +(prof+1)+ "," +tab[i]+ ",#);");
Ajouter(fichier,(prof+1),tab[i],"#");
}
}
}
/*
//Cette solution fonctionne
Ajouter(dossier, 0, "Dossier 1", "#");
Ajouter(dossier, 1, "Fichier 1", "#");
Ajouter(fichier, 1, "Fichier 2", "#");
Ajouter(dossier, 0, "Dossier 2", "#");
Ajouter(fichier, 1, "Fichier 1", "#");
Ajouter(dossier, 1, "Sous-Dossier 1", "#");
Ajouter(dossier, 2, "Fichier 1", "#");
Ajouter(fichier, 3, "Scroutch", "#");
Ajouter(fichier, 2, "Fichier 2", "#");
Ajouter(dossier, 1, "Sous-Dossier 2", "#");
Ajouter(fichier, 2, "Fichier 1", "#");
Ajouter(fichier, 1, "Fichier 2", "#");
Ajouter(fichier, 0, "Fichier 1", "#");
*/
// L'objet Element
function Element(type, profondeur, pere, texte, lien)
{
this.type = type;
this.profondeur = profondeur;
this.pere = pere;
this.ouvert = false;
this.texte = texte;
this.lien = lien;
}
// Méthode de vérification de la présence d'un élément
// un élément est present si son pere est ouvert ou est 0
function Present(n)
{
while (Menu[n].pere != 0)
{
n = Menu[n].pere;
if (!(Menu[n].ouvert)) {return false;}
}
return true;
}
Element.prototype.Present = Present;
// Méthode de modification de l'état d'un élément
function Changer()
{
if (this.ouvert)
{this.ouvert = false;} // si ouvert, on ferme
else
{ // sinon, on ferme tous les éléments de la même branche et on l'ouvre
/*var i = this.pere + 1;
while (i <= nb && Menu[i].profondeur >= this.profondeur)
{
Menu[i].ouvert = false;
i++;
}*/
this.ouvert = true;
}
AffMenu();
}
Element.prototype.Changer = Changer;
// Méthode d'écriture d'un élément
function Ecrire(n)
{
var chaine = "";
if (!(this.Present(n))) return chaine ; // l'élément ne doit pas être affiché
chaine += "<tr><td style='position:relative; left:" + 25 * this.profondeur + "px'>"
//for (var i = 0; i < this.profondeur; i++) {chaine += " ";} petit décalage
if (this.type == fichier)
{chaine += "<a href='" + this.lien + "' onMouseOver=\"window.status='Ouvrir " + this.texte + "'; return true;\" onMouseOut=\"window.status=''; return true;\">" + this.texte + "</a>";}
else
{chaine += "<a href='#' OnMouseDown='Menu[" + n + "].Changer();' target='_self' onMouseOver=\"window.status='" +((this.ouvert) ? "Fermer " : "Etendre ") + this.texte +"'; return true;\" onMouseOut=\"window.status=''; return true;\">" + this.texte + "</a>"}
return chaine + "</td></tr>";
}
Element.prototype.Ecrire = Ecrire;
// Fonction d'ajout d'un élément au menu
function Ajouter(type, profondeur, texte, lien)
{
nb++;
var pere = nb - 1;
while (pere != 0 && Menu[pere].profondeur >= profondeur) {pere--;}
Menu[nb] = new Element(type, profondeur, pere, texte, lien);
}
// Création de l'objet menu dans la page
document.writeln('<div id="menu"></div>');
// Affichage du menu dans l'état actuel
function AffMenu()
{
var chaine = "<table>";
for (var i = 1; i < Menu.length; i++)
{
chaine += Menu[i].Ecrire(i);
}
chaine += "</table>";
document.getElementById('menu').innerHTML = chaine;
}