- Das Droplet CreateToc
- Die hier beschriebene Lösung auf Basis von jQuery
Anleitung
Schritt 1: Das jQuery Plugin installieren
Im Backend unter Admin-Tools das Tool "jQuery Plugin Manager" aufrufen. Dort das angehängte jQuery Plugin hochladen.
Schritt 2: Das Droplet installieren
Im Backend unter Admin-Tools das Tool "Droplets" aufrufen. Über [Import] das angehängte Droplet hochladen.
Schritt 3: toc.js auf der Seite einbinden
Das kann entweder pro Seite oder global erfolgen. Seitenbasiert: Die Seite im Backend zum Bearbeiten öffnen, [Kopfdateien] anklicken, bei "Javascript Dateien" auf [+ Anlegen] klicken und aus dem Dialog "/jquery.toc/toc.js" wählen. Speichern.
Sofern im Frontend noch kein jQuery geladen wird, den Knopf bei "jQuery verwenden" auf "on" stellen.
Schritt 4: Droplet einbinden
Auf der Seite an der gewünschten Stelle das Droplet [[jQueryToC]] einbinden.
Anpassen
Die Standarddarstellung ist in obigem Screenshot zu sehen. Das "Panel" bleibt beim Scrollen an Ort und Stelle. Das Laden des Plugins erfolgt über die Datei loader.js im Verzeichnis ./modules/lib_jquery/plugins/jquery.toc. Diese könnt Ihr Euch nach Gusto anpassen. Zu beachten ist nur, dass die loader.js für alle Seiten gilt, auf denen das Droplet benutzt wird.
Code: Alles auswählen
$(function() {
$('.toc').toc({
header_text: "Auf dieser Seite:",
navClass : "toc toc_fixed toc_shadow"
});
});
Parameter und Defaults
Code: Alles auswählen
$('.toc').toc({
header_text : "On this page:",
navClass : "toc",
listClass : "toc",
itemClass : "toc_item",
listType : "ul",
selector : "h1, h2, h3",
template : "<nav role='navigation' class='{{navClass}}'>" +
"<strong role='heading'>{{header_text}}</strong>" +
"{{toc}}" +
"</nav>"
});
Code: Alles auswählen
$(function() {
$('.toc').toc({
header_text: "Auf dieser Seite:",
navClass : "toc toc_fixed toc_shadow",
selector: "h2, h3, h4"
});
});
Code: Alles auswählen
$(function() {
$('.toc').toc({
header_text: "Auf dieser Seite:",
navClass : "toc",
selector: "h2, h3, h4"
});
});
Demo: http://www.phpmanufaktur.info/de/addons ... tionen.php
Von hinten durch die Brust ins Auge...?
Das getrennte Laden der toc.js und loader.js ist leider nötig, da die Droplets Extension, die das Laden von CSS und JS für Droplets erlaubt, nur je eine Datei von jedem Typ in die Datenbank einträgt.