Letzte Änderung: 01.09.2015 18:20 Uhr

Valid HTML 4.01! Valid CSS!

www.brain4.de > Scripts and more... > JavaScript: Tools: TOC-Generator  

TOC-Generator

Was ist eine TOC?

TOC wird verwendet als Kurzwort für Table Of Contents, also ein Inhaltsverzeichnis.

Was nützt ihnen der TOC-Generator?

Sie können ihn in einem HTML-Dokument einsetzen, um dem Benutzer eine leichtere Navigation innerhalb des Dokumentes zu erleichtern. Damit ist schon gesagt, dass sich ein TOC-Generator nur dann lohnt, wenn sie ihr Dokument durch eine genügend große Anzahl von Überschriften strukturieren. Hilfreich ist der TOC-Generator dann, wenn ihre Seiten nicht aus einem CMS generiert wird, welches schon eine Generierung einer TOC mitbringt.

Desweiteren ist der TOC-Generator dahingehend hilfreich, dass er die TOC aus dem Content generiert. Das bedeutet, dass sie sich nur um den Inhalt der Seite kümmern müssen, die Dokumentübersicht aber automatisch erstellt wird. Das stellt für sie eine Arbeitserleichterung dar.

Einschränkend muss man sagen, dass der TOC-Generator nur dann das Ergebnis anzeigt, wenn im Browser JavaScript aktiviert ist. Wenn sie also dem Besucher ihrer Seiten eine TOC als zusätzliche Hilfe anbieten wollen und es nicht tragisch ist, wenn diese fehlt, dann sollten sie ihn einsetzen.

Wie bekommen sie den TOC-Generator?

Sie müssen lediglich das Script toc.js in ihre Seiten einbinden. Es durchsucht nach dem Laden des Dokumentes die Seite nach Überschriften und stellt die Überschriften in einer Liste dar. Wenn sie Überschriften verschiedener Ebenen benutzen, werden diese als verschachtelte Liste dargestellt. Sie können das in obiger Ansicht der TOC nachvollziehen.

Wie kompliziert ist der TOC-Generator zu verwenden?

Aus meiner Sicht ist es nicht kompliziert. Folgenden Einstellungen können Sie vornehmen:

Allgemeines

Das Objekt TOC, weches in der toc.js bereitgestellt wird, enthält einen Abschnitt Configuration:

    TOC = {
			/* Configuration Start */
			..
			/* Configuration END */
			
			// Implementation
	  }
	 

Die hier angegebenen Variablen können sie verändern. Sollten sie einen Wert nicht setzen wollen, dann weisen sie der Variablen den Wert false zu.

Der Inhaltscontainer

container : "content"

Normalerweise gibt es in einem HTML-Dokument nicht nur einen beschreibenden Text, sondern auch einen oder mehrere Bereiche, die eine Navigation beinhalten. Haben sie nun einen Bereich definiert, der den eingentlichen Inhalt enthält, dann geben sie dessen id hier an. Gibt es keinen solchen Bereich, setzen sie den Wert auf false, dann bezieht sich die Suche auf das gesamte Dokument.

Überschriften einschränken.

headline : 2

Wenn sie möchten, dass erst ab einer bestimmten Überschriftenebene die TOC erstellt wird, geben sie hier den entsprechenden Wert an. In obigem Beispiel werden Überschriften der Ebene 1 ignoriert.

Mindestzahl an Überschriften.

minNavPoints : 2

Eine TOC lohnt sich im allgemeinen erst ab einer bestimmten Anzahl von Überschriften. In obigem Beispiel müssen mindesten zwei Überschriften der obersten Stufe existieren.

Ort der TOC

insertAfter : "contentHL"

Geben sie hier die ID eines Elementes an, dem die TOC folgen soll. Setzen sie den Wert auf false, wenn die TOC erstes Kind vom container sein soll. Ist kein container angegeben, wird die TOC das erste Element im body sein.

Text der Überschrift

headlineText : "Inhaltsverzeichnis"

Geben sie hier an, wie die Überschrift der TOC heißen soll. Diese Einstellung ist z.B. für nichtdeutsche Texte nützlich.

Listendarstellung

listType : "OL"

Geben sie hier die Art der Liste an. Erlaubt ist "OL" (geordnete Liste mit Nummerierung) und "UL" (Ungeordnete Liste mit Bullets). Die Art der Formatierung der Liste können sie über CSS selbst bestimmen, siehe dazu auch den nächsten Abschnitt.

Layout der TOC

Über CSS lässt sich das Aussehen der TOC steuern. Für obiges Aussehen habe ich folgende Formatierung vorgenommen:

/* TOC */
	#content #TOC{
	  border: 1px dashed #009;
	  font-size: 0.7em;
	  margin: 1ex 0;
	  width: 70%;
	  background: #FFF;
	}
	#content #TOC p.TOCHeadLine{
	  margin: 0.5em 0.5em;
	}
	#content #TOC a{
	 padding:0.5ex 0.2ex;
	}
	#content #TOC ul ul, #content #TOC ol ol{
	  margin-top:0.2ex;
	  margin-bottom:0;
	}
	#content #TOC li{
		padding:0;
	  border: none;
	}
/* TOC */
  

Wie man sieht, werden für ein Element mit der id="TOC" Formatanweisungen angegeben. Dieses Element enthält die TOC. Die Überschrift lässt sich über die CSS-Klasse .TOCHeadline steuern. Ansonsten lassen sich noch die Elemente ol, ul, li und a formatieren, die sich im DOM-Baum innerhalb des Elementes mit der id="TOC" befinden.

Offene Fragen

Falls Sie Anregungen zum TOC-Generator haben oder einen Fehler entdecken, wenden Sie sich bitte an mich und senden mir eine E-Mail.

TOC-Generator wurde mit folgenden Browsern erfolgreich getestet

Beispiel einer mehrstufigen Struktur

Im folgenden ein längeres Dokument-Fragment mit Fülltext.

Überschrift 3. Ordnung (1)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque facilisis blandit eros. Nulla at nunc quis lorem tempus mattis. Aliquam erat volutpat. Nulla facilisi. Sed nibh mauris, posuere nec, suscipit sed, commodo eu, elit. Nullam sit amet pede. In enim felis, congue quis, laoreet pulvinar, vestibulum a, dui. Aenean ac neque pretium nisl bibendum malesuada. Curabitur id diam. Nullam nonummy leo at augue. Duis ornare aliquet leo. Sed tellus metus, tincidunt a, sodales at, ullamcorper laoreet, nisl.

Überschrift 4. Ordnung (2)

Sed quis lacus. In hac habitasse platea dictumst. Fusce cursus velit vitae neque rhoncus ornare. Pellentesque feugiat diam sit amet felis. Donec et mauris. Sed justo mi, rutrum placerat, consequat non, pulvinar vel, ligula. Ut vehicula convallis pede. Maecenas non urna. Etiam interdum, nisi a semper vehicula, justo felis fringilla erat, ac porttitor nulla erat a risus. Pellentesque iaculis neque eu justo. Sed dignissim commodo leo. Vestibulum eget magna. Duis vel ligula. Quisque malesuada, ipsum id ultricies congue, metus nibh imperdiet quam, nec scelerisque metus lorem ut elit. Morbi malesuada velit ut tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu enim. Nullam pede leo, rhoncus in, mattis at, iaculis sit amet, enim. Maecenas tellus. Quisque vehicula, nunc sed dapibus pellentesque, leo ligula vestibulum est, eget laoreet neque orci nec odio.

Überschrift 5. Ordnung (3)

Pellentesque quam. Pellentesque sit amet dui. Duis consectetuer nisl commodo augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse in neque in enim sollicitudin ultricies. Integer eu nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie, elit nec volutpat placerat, mi metus auctor sem, vitae ultrices mi ipsum nec tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sed purus sit amet lectus nonummy faucibus.

Überschrift 6. Ordnung (4)

Aliquam erat volutpat. Vestibulum dolor leo, placerat eu, dignissim sit amet, mollis sed, mi. Pellentesque laoreet erat ac augue. Aenean facilisis quam et orci. Phasellus fringilla dolor ac ipsum ultricies varius. Aliquam rhoncus laoreet turpis. Nulla velit. Integer ante. Fusce libero nisl, hendrerit sed, pulvinar eu, dictum non, velit. Phasellus consectetuer velit euismod justo. Suspendisse fringilla, urna ut adipiscing adipiscing, nibh erat congue nunc, in dictum elit diam eget lacus. Nunc in lorem. Vestibulum euismod facilisis sapien. Mauris eget ligula.

Überschrift 6. Ordnung (5)

Praesent mattis leo eu elit. Aenean vehicula fringilla mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris et nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempor urna nec ligula. Etiam dolor. Donec ultrices rutrum ante. Pellentesque blandit condimentum tellus. In tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Überschrift 5. Ordnung (6)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque facilisis blandit eros. Nulla at nunc quis lorem tempus mattis. Aliquam erat volutpat. Nulla facilisi. Sed nibh mauris, posuere nec, suscipit sed, commodo eu, elit. Nullam sit amet pede. In enim felis, congue quis, laoreet pulvinar, vestibulum a, dui. Aenean ac neque pretium nisl bibendum malesuada. Curabitur id diam. Nullam nonummy leo at augue. Duis ornare aliquet leo. Sed tellus metus, tincidunt a, sodales at, ullamcorper laoreet, nisl.

Überschrift 6. Ordnung (7)

Sed quis lacus. In hac habitasse platea dictumst. Fusce cursus velit vitae neque rhoncus ornare. Pellentesque feugiat diam sit amet felis. Donec et mauris. Sed justo mi, rutrum placerat, consequat non, pulvinar vel, ligula. Ut vehicula convallis pede. Maecenas non urna. Etiam interdum, nisi a semper vehicula, justo felis fringilla erat, ac porttitor nulla erat a risus. Pellentesque iaculis neque eu justo. Sed dignissim commodo leo. Vestibulum eget magna. Duis vel ligula. Quisque malesuada, ipsum id ultricies congue, metus nibh imperdiet quam, nec scelerisque metus lorem ut elit. Morbi malesuada velit ut tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu enim. Nullam pede leo, rhoncus in, mattis at, iaculis sit amet, enim. Maecenas tellus. Quisque vehicula, nunc sed dapibus pellentesque, leo ligula vestibulum est, eget laoreet neque orci nec odio.

Überschrift 6. Ordnung (8)

Pellentesque quam. Pellentesque sit amet dui. Duis consectetuer nisl commodo augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse in neque in enim sollicitudin ultricies. Integer eu nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie, elit nec volutpat placerat, mi metus auctor sem, vitae ultrices mi ipsum nec tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sed purus sit amet lectus nonummy faucibus.

Überschrift 4. Ordnung (9)

Aliquam erat volutpat. Vestibulum dolor leo, placerat eu, dignissim sit amet, mollis sed, mi. Pellentesque laoreet erat ac augue. Aenean facilisis quam et orci. Phasellus fringilla dolor ac ipsum ultricies varius. Aliquam rhoncus laoreet turpis. Nulla velit. Integer ante. Fusce libero nisl, hendrerit sed, pulvinar eu, dictum non, velit. Phasellus consectetuer velit euismod justo. Suspendisse fringilla, urna ut adipiscing adipiscing, nibh erat congue nunc, in dictum elit diam eget lacus. Nunc in lorem. Vestibulum euismod facilisis sapien. Mauris eget ligula.

Überschrift 5. Ordnung (10)

Praesent mattis leo eu elit. Aenean vehicula fringilla mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris et nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempor urna nec ligula. Etiam dolor. Donec ultrices rutrum ante. Pellentesque blandit condimentum tellus. In tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Überschrift 6. Ordnung (11)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque facilisis blandit eros. Nulla at nunc quis lorem tempus mattis. Aliquam erat volutpat. Nulla facilisi. Sed nibh mauris, posuere nec, suscipit sed, commodo eu, elit. Nullam sit amet pede. In enim felis, congue quis, laoreet pulvinar, vestibulum a, dui. Aenean ac neque pretium nisl bibendum malesuada. Curabitur id diam. Nullam nonummy leo at augue. Duis ornare aliquet leo. Sed tellus metus, tincidunt a, sodales at, ullamcorper laoreet, nisl.

Überschrift 6. Ordnung (12)

Sed quis lacus. In hac habitasse platea dictumst. Fusce cursus velit vitae neque rhoncus ornare. Pellentesque feugiat diam sit amet felis. Donec et mauris. Sed justo mi, rutrum placerat, consequat non, pulvinar vel, ligula. Ut vehicula convallis pede. Maecenas non urna. Etiam interdum, nisi a semper vehicula, justo felis fringilla erat, ac porttitor nulla erat a risus. Pellentesque iaculis neque eu justo. Sed dignissim commodo leo. Vestibulum eget magna. Duis vel ligula. Quisque malesuada, ipsum id ultricies congue, metus nibh imperdiet quam, nec scelerisque metus lorem ut elit. Morbi malesuada velit ut tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu enim. Nullam pede leo, rhoncus in, mattis at, iaculis sit amet, enim. Maecenas tellus. Quisque vehicula, nunc sed dapibus pellentesque, leo ligula vestibulum est, eget laoreet neque orci nec odio.

Überschrift 5. Ordnung (13)

Pellentesque quam. Pellentesque sit amet dui. Duis consectetuer nisl commodo augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse in neque in enim sollicitudin ultricies. Integer eu nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie, elit nec volutpat placerat, mi metus auctor sem, vitae ultrices mi ipsum nec tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sed purus sit amet lectus nonummy faucibus.

Überschrift 6. Ordnung (14)

Aliquam erat volutpat. Vestibulum dolor leo, placerat eu, dignissim sit amet, mollis sed, mi. Pellentesque laoreet erat ac augue. Aenean facilisis quam et orci. Phasellus fringilla dolor ac ipsum ultricies varius. Aliquam rhoncus laoreet turpis. Nulla velit. Integer ante. Fusce libero nisl, hendrerit sed, pulvinar eu, dictum non, velit. Phasellus consectetuer velit euismod justo. Suspendisse fringilla, urna ut adipiscing adipiscing, nibh erat congue nunc, in dictum elit diam eget lacus. Nunc in lorem. Vestibulum euismod facilisis sapien. Mauris eget ligula.

Überschrift 6. Ordnung (15)

Praesent mattis leo eu elit. Aenean vehicula fringilla mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris et nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempor urna nec ligula. Etiam dolor. Donec ultrices rutrum ante. Pellentesque blandit condimentum tellus. In tristique. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Überschrift 3. Ordnung (16)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque facilisis blandit eros. Nulla at nunc quis lorem tempus mattis. Aliquam erat volutpat. Nulla facilisi. Sed nibh mauris, posuere nec, suscipit sed, commodo eu, elit. Nullam sit amet pede. In enim felis, congue quis, laoreet pulvinar, vestibulum a, dui. Aenean ac neque pretium nisl bibendum malesuada. Curabitur id diam. Nullam nonummy leo at augue. Duis ornare aliquet leo. Sed tellus metus, tincidunt a, sodales at, ullamcorper laoreet, nisl.

Überschrift 4. Ordnung (17)

Sed quis lacus. In hac habitasse platea dictumst. Fusce cursus velit vitae neque rhoncus ornare. Pellentesque feugiat diam sit amet felis. Donec et mauris. Sed justo mi, rutrum placerat, consequat non, pulvinar vel, ligula. Ut vehicula convallis pede. Maecenas non urna. Etiam interdum, nisi a semper vehicula, justo felis fringilla erat, ac porttitor nulla erat a risus. Pellentesque iaculis neque eu justo. Sed dignissim commodo leo. Vestibulum eget magna. Duis vel ligula. Quisque malesuada, ipsum id ultricies congue, metus nibh imperdiet quam, nec scelerisque metus lorem ut elit. Morbi malesuada velit ut tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse eu enim. Nullam pede leo, rhoncus in, mattis at, iaculis sit amet, enim. Maecenas tellus. Quisque vehicula, nunc sed dapibus pellentesque, leo ligula vestibulum est, eget laoreet neque orci nec odio.

Überschrift 4. Ordnung (18)

Pellentesque quam. Pellentesque sit amet dui. Duis consectetuer nisl commodo augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse in neque in enim sollicitudin ultricies. Integer eu nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie, elit nec volutpat placerat, mi metus auctor sem, vitae ultrices mi ipsum nec tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sed purus sit amet lectus nonummy faucibus.

zur Navigation