Générer une table des matieres

La table des matières (toc)


Une table des matières peut être généré côté serveur où côté client.
Si comme moi vous préférez utiliser Dojo pour la créer, voici de quoi vous ravir.

Fonctionnement

Le script va lire le contenu du DOM à la recherche de balise (par défaut les h1 et h2 mais cela est paramétrable).
Ces balises vont ensuite être utilisées pour générer une suite de balise LI.

Utilisation

Il ne suffit que de deux lignes pour générer votre table des matières :

//charge le code de création de la toc
dojo.require("dojox.toc");
 
dojo.addOnLoad(function() {
    //creation de la toc
    dojox.toc.create();
}

Note : Utilisé sans argument, dojox.toc.create() va générer la TOC en parcourant tous les enfants du body de la page à la recherche de h1 et h2.

Les arguments

dojox.toc.create() accepte un argument de type objet :

	{
		rootNode : dojo.body() /*Racine a parcourir. La recherche se fait à l'intérieur de cette balise*/,
		classToIgnore : [] /*Tableau listant les classes à ignorer. Un élément qui comporte l'une de ces classes sera ignoré.*/,
		appendNode : dojo.body() /*Noeud de référence autour duquel sera ajouté la table des matières. S'il vaut nul, le noeud ne sera pas ajouté au DOM*/,
		position : "before" /*Position à laquelle le noeud de la TOC sera ajouté autour du noeud défini par appendNode*/,
		"class" : "toc" /*Classe ajoutée au UL de la TOC*/,
		query : "h1,h2" /*Noeuds qui seront recherché pour générer la TOC*/,
		stripHtml : true /*Supprime l'HTML trouvé dans les noeuds utilisés pour la TOC*/,
		rootAnchor : "dojox.toc." /*Texte ajouté dans les ancres (avant la position numérique de l'ancre)*/
	}

Exemple et téléchargement

Vous trouverez le code à télécharger ainsi qu’un exemple ici :

http://ben.dojotoolkit-fr.org/test_toc.html

A propos

Technophile passionné par le web, Je travaille actuellement en tant qu'Expert Dojo auprès de la banque ING aux Pays Bas. http://www.linkedin.com/in/santalucia

Publié dans code Tagués avec :

Laisser un commentaire