Tests

Joust

Notez que ce site n'utilise pas Joust mais les scripts de Sylvain Machefert.

Qu'est-ce-que c'est ?

Joust est un ensemble de fichiers HTML contenant des commandes Javascript qui permettent la création de menus dynamiques tels que celui de ce site.

Comment ça marche ?

Tout d'abord, téléchargez l'archive joust.zip sur le site de Joust. Décompactez là dans un dossier quelconque (au besoin, récupérez Zip Central).
Ouvrez le fichier index.htm avec un éditeur de texte quelconque (p.e. sous Windows, Maj+clic-droit -> "Ouvrir avec" le bloc-notes). Pour exemple, voici un aperçu de ces lignes dans mon fichier index.htm :

// Now set up the menu with a whole lot of addEntry and addChild function calls
    var level1ID = -1;
    var level2ID = -1;
    var level3ID = -1;
    var level4ID = -1;

var texdir = "info/tex/";
var pfmdir = "profmath/";
var pfmres = "profmath/ressources/";
var pfmdoc = "profmath/doc/";
var pfmtch = "profmath/telechargements/";
var lindir = "info/linux/";
var tstdir = "info/tests/";
   
level1ID = theMenu.addEntry(-1, "Document", "Accueil", "home.htm", "Accueil du site");
level1ID = theMenu.addEntry(level1ID, "Folder", "Projets Profmath", pfmdir+"profmath.html", "Liste des projets");
level2ID = theMenu.addChild(level1ID, "Document", "Assistant de saisie", pfmdoc+"assistant.html", "Pour faciliter la saisie de textes et de graphiques.");
level2ID = theMenu.addEntry (level2ID, "Document", "Macros LaTeX", pfmdoc+"pfm_macr.html", "Mes fichiers de macros.");
level2ID = theMenu.addEntry (level2ID, "Document", "Ressources HTML", pfmres+"ressources.html", "Des cours, exercices, figures, etc.");
level1ID = theMenu.addEntry(level1ID, "Folder", "LaTeX", texdir+"tex.html", "Présentation");
level2ID = theMenu.addChild(level1ID, "Folder", "Doc", texdir+"doc.html", "Index des informations sur LaTeX.");
level3ID = theMenu.addChild(level2ID, "Folder", "Graphiques", texdir+"graphiques.html", "Comment faire des graphiques sous LaTeX.");

 ...

Voici une description des premières lignes :

- tout d'abord on définit autant de niveaux d'arborescence que nécessaire :
var level1ID = -1;
...

- éventuellement, on peut définir des variables contenant les noms des dossiers contenant vos pages html :
var texdir = "info/tex/";
...

- ensuite on définit les entrées du menu : theMenu.addEntry crée une entrée dans un niveau donné de l'arborescence et theMenu.addChild ajoute un niveau à l'arborescence :

level1ID = theMenu.addEntry(-1, "Document", "Accueil", "home.htm", "Accueil du site");
level1ID = theMenu.addEntry(level1ID, "Folder", "Projets Profmath", pfmdir+"profmath.html", "Liste des projets");
level2ID = theMenu.addChild(level1ID, "Document", "Assistant de saisie", pfmdoc+"assistant.html", "Pour faciliter la saisie de textes et de graphiques.");
level2ID = theMenu.addEntry (level2ID, "Document", "Macros LaTeX", pfmdoc+"pfm_macr.html", "Mes fichiers de macros.");
level2ID = theMenu.addEntry (level2ID, "Document", "Ressources HTML", pfmres+"ressources.html", "Des cours, exercices, figures, etc.");
level1ID = theMenu.addEntry(level1ID, "Folder", "LaTeX", texdir+"tex.html", "Présentation");
level2ID = theMenu.addChild(level1ID, "Folder", "Doc", texdir+"doc.html", "Index des informations sur LaTeX.");
level3ID = theMenu.addChild(level2ID, "Folder", "Graphiques", texdir+"graphiques.html", "Comment faire des graphiques sous LaTeX.");

...

puis il ne reste plus qu'à enregistrer le fichier index.htm.

Remarque : pour ceux qui utilisent Visual Basic (de Microsoft...), il existe un logiciel appelé VB2Joust qui permet de transformer le contenu d'un composant TreeView en du code javascript Joust.