Créer une table des matières automatique avec JQuery

Voici le script pour JQuery utilisé sur ce site pour générer automatiquement la table des matières d'une page.

Explication de la manoeuvre

Créer dans la page un bloc DIV invisible (display:none) nommé #tdm. Vide, il sera rendu visible et rempli automatiquement par le script s'il existe au moins un titre dans la page.
Le script va parcourir tous les titres de la page. Pour chacun il va :
- Ajouter un lien-ancre unique autour du titre (tdm1, tdm2, etc.)
- Créer un lien vers ce titre dans le block #tdm avec le texte du titre
S'il y a au moins un titre, on rend visible le bloc #tdm.
On ajoute un évènement Click sur le titre "Table des matières" (agrémenté d'une icône +/-) pour l'ouvrir/fermer (en fait rendre visible ou non la liste UL)

Pour utiliser ce script, il vous suffit donc de créer le bloc #tdm en le plaçant où vous le souhaitez dans votre page :

<div id="tdm"></div>

Code JS complet

$(document).ready(function() {
	// --- table des matières ---
 
	var tdm = 0; // numéro unique pour chaque titre
 
	// on parcours les H*
	$("*:header:visible").each(function(){
 
		var h = ''; // type du titre courant, afin d'appliquer un style
 
		if ($(this).is("h1")) {
			// décommenter la ligne suivante pour lister aussi le titre principal de la page (h1)
			// h = 'h1';
		}
		else if ($(this).is("h2")) {
			h = 'h2';
		}
		else if ($(this).is("h3")) {
			h = 'h3';
		}
		else if ($(this).is("h4")) {
			h = 'h4';
		}
		else if ($(this).is("h5")) {
			h = 'h5';
		}
		else if ($(this).is("h6")) {
			h = 'h6';
		}
 
		if (h != '') {
 
			tdm++; // un nouveau titre
 
			if (tdm == 1) {
				// au 1er titre, on ajoute le titre et la liste vide
				$("#tdm").append('<strong><img src="./tdm_moins.gif" alt="-" /> Table des matières</strong><ul></ul>');
			}
 
			// on entoure le titre d'une ancre unique
			$(this).wrap('<a class="tdm" name="tdm' + tdm + '"></a>');
 
			// on ajoute un élément à la liste de la TDM
			$("#tdm ul").append('<li class="' + h + '"><a href="#tdm' + tdm + '">' + $(this).text() + "</a></li>");
		}
	});
 
	// --- si ya au moins 1 titre
	if (tdm > 0) {
		// on rend visible le div de la table des matières
		$("#tdm").show();
 
		// gestion toggle la tdm
		$("#tdm strong").click(function() {
			$("#tdm ul").toggle();
			if ($('#tdm ul').is(':visible')) {
				$(this).html('<img src="./tdm_moins.gif" alt="-" /> Table des matières');
			}
			else {
				$(this).html('<img src="./tdm_plus.gif" alt="+" /> Table des matières');
			}
			return false;
		});
	}
});

Couche CSS

A vous de personnaliser les éléments de cette table des matières. Au minimum, nous allons rendre le block #tdm invisible par défaut et décaler chaque niveau de titre par une bordure gauche plus ou moins grande.

/**
 * table des matières
 */
 
#tdm {
	/* float: right; */
	display: none;
  	margin: 0;
	padding: 10px;
}
 
#tdm strong {
	/* le bloc titre 'table des matières' */
	display: block;
	cursor: pointer;
}
 
 
#tdm li.h1 {
  margin-left: 0;
}
 
#tdm li.h2 {
  margin-left: 10px;
}
 
#tdm li.h3 {
  margin-left: 20px;
}
 
#tdm li.h4 {
  margin-left: 30px;
}
 
#tdm li.h5 {
  margin-left: 40px;
}
 
#tdm li.h6 {
  margin-left: 50px;
}

Il faudra aussi sans doute retoucher les balises H* des titres, qui seront des ancres, pour ne pas qu'ils prennent l'apparence de liens (soulignage, changement de couleur, etc.).

Ressources

Les icônes + et -

Liens

A propos

Ce tutoriel est en copyleft.

Vous êtes libres de le reproduire, de le distribuer et de le modifier à volonté (à condition que ces même droits soient préservés).
Merci d'en indiquer l'auteur original avec un lien vers http://tuto.isoat.org

isoat.org · Cehemes v0.22 · 13744 visites · 0 requête · 0.287 sec