Dokumentation Listennavigation

Aus DeDi-Help

Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[bearbeiten] Beschreibung

Titel: Listennavigation

Version: 0.9.3-dev

DeDi-Version: 01.00.01 Erweiterung 0.2.2 (sollte ab 01.00.00 funktionieren)

Letzte Änderung: 17.11.2005

Autor: ketti


Das Modul Listennavigation stellt eine umfangreich konfigurierbare Navigation für Ordner und Seiten zur Verfügung. Es ist primär darauf ausgerichtet die einzelnen Menüpunkte als HTML-Liste (<ul>, <li>) auszugeben, jedoch auch flexibel genug um die Ordner und Seiten z.B. als Tabelle anzuzeigen.

Dieses Modul entfaltet seine wahre Stärke, wenn die Links der verschiedenen Ebenen mit Hilfe von CSS "formatiert" werden. Auf diese Weise kann man eine sehr schlanke, (X)HTML konforme Navigation erzeugen, die durch CSS fast jedes beliebige Aussehen annehmen, aber auch ohne CSS und in Screenreadern vollständig genutzt werden kann.

[bearbeiten] Übersicht der Modulkonfiguration

Um einen ersten Eindruck zu erhalten ist es sinnvoll, den Konfigurationsmodus aufzurufen. Dies geschieht wie immer in dem man unter Design -> Module auf den Schraubenschlüssel des Moduls klickt. (Kenntnisse, wie Module eingebunden werden, sind hier vorausgesetzt). Nachdem das Modul im Backend importiert wurde (Backend unter Design > Module > Modul importieren) finden wir es unter Design - installierte Module. Für die Konfiguration klicken wir nun rechts auf den Schraubenschlüssel Bild:Icon konfigurieren.png.

Um eine vollständige Übersicht der Möglichkeiten zu erhalten, sollte zunächst der Konfigurationsmodus auf "Erweitert" gestellt werden.

Bild:Listennavi_093_einstellung.png


Bild:Listennavi_093_konfiguration.png


Startordner: Hier wird der Startpunkt für die Navigation ausgwählt.


Anzeigeart: Auswahlfeld, ob Ordner mit Seiten, nur Ordner oder nur Seiten in der Navigation angezeigt werden sollen.


Sortierung: Hier kann ausgewählt werden, nach welchen Kriterien die Ordner und Seiten sortiert werden sollen. Zur Auswahl stehen: die klassische Variante (wie im Backend), nach Name, nach Erstellungsdatum und nach dem Datum der letzten Änderung. Weiterhin kann angegeben werden, ob die Sortierung aufsteigend oder absteigend erfolgen soll.


Erst Ordner, dann Seiten anzeigen: Falls hier "ja" markiert wird, werden zuerst die Unterordner und dann die Seiten eines Ordners ausgegeben.


Komplette Ordnerstruktur anzeigen: Wird "ja" ausgewählt, werden alle Ordner und Seiten angezeigt. Wird dieser Punkt nicht ausgwählt, wird nur jeweils der Aktive Ordner "aufgeklappt".


Anzahl darzustellender Ebenen (0: alle): Hier kann festgelegt werden, wie viele Ebenen angezeigt werden sollen. Bei der Auswahl von 0 werden alle vorhandenen Ebenen entsprechend den übrigen Konfigurationsoptionen dargestellt. Bei einer 1 wird nur die Ebene, in der der Startordner liegt, dargestellt. Bei einer 2 eine Ebene mehr, usw.


Startseiten anzeigen: Auswahl, ob die Startseite zusätzlich zum Ordner angezeigt werden soll (die Startseite wird angezeigt, wenn der Benutzer in der Navigation den Ordner anklickt).


Ordner nur als aktiv markieren, wenn Startseite angezeigt wird: Wenn hier "ja" ausgewählt wird, wird das Template "Aktiver Ordner" nur für den aktuellen Ordner verwendet, falls gerade die Startseite angezeigt wird. Für den Fall, dass eine andere Seite aus diesem Ordner aktiv ist, wird das Template "Ordner" verwendet. Ist diese Option nicht aktiviert, wird immer das Template "Aktiver Ordner" für den aktuellen Ordner (das ist der Ordner, in dem sich die aktuell dargestellte Seite befindet) verwendet.


Pfad als aktiv verfolgen: Bei dieser Einstellung wird auch für die übergeordneten Ordner das Template "Aktiver Ordner" verwendet.


Ordner ausschliessen (idcat kommasepariert angeben): Seiten ausschliessen (idcatside kommasepariert angeben): über diesen beiden Felder können Seiten und Ordner für die Navigation ausgeschlossen werden, d.h. diese Seiten werde dann nicht angezeigt. Um eine Seite nicht in der Navigation anzuzeigen, wird hier einfach die Seiten ID eingetragen. Mehrere Seiten trennen wir einfach durch ein Komma (ohne Leerzeichen). Die ID der Seiten und Ordner wird angezeigt, wenn mann im Backend unter Redaktion -> Seiten mit der Maus auf das Info-Symbol der Ordner bzw. Seiten geht.


Ausgeschlossene Seiten und Ordner auch im Backend verbergen: Wahlmöglichkeit ob ausgeschlossene Ordner und Seiten im Backend angezeigt werden sollen oder nicht. Bsp.: Kommt man nach dem Einloggen in den "internen Bereich" der Website (z.B. Mitgliederbereich), so können die ausgeschlossenen Seiten und Ordner auch hier verborgen werden.


Einleitung/Ende der Navigation anzeigen, falls Navigation "leer": Die Einleitung bzw. das Ende der Navigation wird standardmäßig unterdrückt, falls keine Seiten oder Ordner sichtbar sind. Mit dieser Option besteht die Möglichkeit das erwähnte Verhalten zu ändern.


Startnummer für Tabindex: Mit Hilfe des Tabulator-Taste können die Links in der Reihenfolge des Tabindex angesprungen werden. Eine Vergabe des Tabindex kann im Template automatisch generiert werden. Um Konflike mit anderen Tabindex auf der Seite zu vermeiden, kann hier die Startnummer angegeben werden. Bsp.: Navigation A beginnt bei 1, Navigation B beginnt bei 10.

[bearbeiten] Templatevariablen

Die eigentliche Ausgabe der Navigation wird über die nun folgenden Einstellungen erreicht. Hierzu ist die Eingabe von HTML/XHTML und die Verwendung von eingebundenen CSS-Klassen erlaubt bzw. nötig. Hinzu kommen die möglichen Templatevariablen, die kurz erläutert werden:


Mögliche Templatevariablen: Achtung: Bitte darauf achten wo diese Templatevariablen eingesetzt werden können!


{name}:

Gibt den gespeicherten Ordner- bzw. Seitennamen aus.

Bsp.: <li><a href="{link}">{name}</a></li>


{link}:

Gibt den Link zur Seite bzw. Ordner aus.

Bsp.: <li><a href="{link}">{name}</a></li>


{desc}:

"Der Dirigent" bietet die Möglichkeit, unter Redaktion - Seiten weitere Ordnerinformationen Bild:Backend-blue-i.gif und Seiteninformationen Bild:Backend-blue-ia.gif anzugeben. Diese Informationen können mit {desc} angezeigt werden. Bei Ordnern wird hierfür der Inhalt des Feldes "Beschreibung" und bei Seiten wird der Inhalt des Feldes "Notizen" ausgegeben.

Bsp.: <li><a href="{link}" title="{desc}">{name}</a></li>


{id}:

Durch die Templatevariable {id} können einzelne Seiten- und/oder Ordner formatiert werden. {id} wird durch idcatside bei Seiten bzw. idcat bei Ordnern ersetzt.

Bsp.:<li class="page page-{id}"><a href="{link}">{name}</a></li>


{tabindex}:

Ein Tabindex bestimmt die Tabulator-Reihenfolge für Verweise. Modernere Browser erlauben es, mit Hilfe der Tabulator-Taste an der Tastatur nacheinander die Verweise einer HTML-Datei anzuspringen (mit der Return-Taste ist der Verweis dann ausführbar).

Normalerweise werden die Verweise dabei in der Reihenfolge angesprungen, in der sie in der Datei definiert sind. Sie können in HTML jedoch eine andere Reihenfolge festlegen, zum Beispiel, um beim Anspringen von Verweisen zuerst Projektverweise und erst dann Verweise zu anderen WWW-Seiten anzubieten. Ein Tabindex wird zu jedem Navigatinspunkt ausgegeben. (Quelle: SELFHTML - Tabulator-Reihenfolge für Verweise)

Bsp.: <li><a href="{link}" tabindex="{tabindex}">{name}</a></li>


{layer}:

Die Templatevariable {layer} wird ausschließlich im Bereich "Ebene" verwendet und sorgt dafür, dass die Templates für die Seiten, aktive Seiten, Ordner und die aktiven Ordner eingebunden werden.

Bsp.: <ul>{layer}</ul>


{folder}:

Sorgt bei den Ordner-Templates für die Anzeige der untergeordneten Ordner und Seiten.

Bsp.: <li><a href="{link}">{name}</a>{folder}</li>


{first}...{/first} und {last}...{/last}:

Das erste und das letzte Listenelement kann durch die bedingt ausgewerteten Konstrukte "{first}...{/first}" und "{last}...{/last}" besonders gekennzeichnet werden.

Ab der Version 0.9.3-dev wurde die Funktionalität erweitert. Es kann jetzt ein "else-Fall" angegeben werden. Bsp.: {first}class="first"{else}class="linker_rand"{/first}. Damit können jetzt auch "Link1 | Link2 | Link3"-Navigationen erzeugt werden.

Bsp.: <li{first} class="first"{/first}> wird beim ersten Listenelement zu <li class="first"> und sonst zu <li>

Um eine Navigation der Art: Menü1 | Menü2 | Menü3 hinzubekommen kann also auch folgendes in das Feld Ordner oder aktiver Ordner eingetragen werden. "{first}<li><a title="{name}" href="{link}">{name}</a></li>{else}<li> | </li><li><a title="{name}" href="{link}">{name}</a></li>{/first}"


{depth}:

Ab der Version 0.9.3-dev wurde die Templatevariable {depth} eingeführt. Sie gibt die Ebenentiefe in der aktuellen Navigation an. Hinweis: Für Seiten und Unterordner des Startordners hat {depth} immer den Wert 1, unabhängig von der tatsächlichen Ebenentiefe.

[bearbeiten] Templates

In diesem Bereich wird nun der (X)HTML-Code für die Darstellung der Navigation eingetragen. Hierbei eignet sich die Listennavigation zwar hervorragend für die Darstellung von Listen, die Verwendung von Listenelementen ist aber nicht zwingend notwendig.

Die hier aufgeführten Werte dienen einer ersten Verwendung der Listennavigation und erzeugen eine einfache Liste. Dieses Modul entfaltet seine wahre Stärke, wenn die Links der verschiedenen Ebenen mit Hilfe von CSS "formatiert" werden. Darüber hinaus bieten die Templatevariablen noch viele weitere Möglichkeiten.

Einleitung der Navigation:

Mögliche Templatevariablen: {name}, {link}, {desc}, {id}, {tabindex}. (Beziehen sich auf den Startordner)


Quelltext für die Einleitung der Navigation. Die hier verwendeten Templatevariablen beziehen sich alle auf den Startordner. Falls der Startordner "Root" ist, werden diese Variablen nicht ersetzt!

<div>


Ende der Navigation:

Mögliche Templatevariablen: {name}, {link}, {desc}, {id}, {tabindex}. (Beziehen sich auf den Startordner)

Quelltext für das Ende der Navigation.

</div>


Ebene:

Mögliche Templatevariablen: {layer}, {id}

Hier sollte zumindest die Templatevariable {layer} aufgeführt werden, um dafür zu sorgen, dass Ordner und Seiten angezeigt werden.

<ul>{layer}</ul>


Seite:

Mögliche Templatevariable: {name}, {link}, {desc}, {id}, {tabindex}, {first}...{/first}, {last}...{/last}

Quelltext für die Darstellung der Seiten.

<li><a href="{link}">{name}</a></li>


Aktuelle Seite:

Mögliche Templatevariable: {name}, {link}, {desc}, {id}, {tabindex}, {first}...{/first}, {last}...{/last}

Quelltext für die Darstellung der aktuellen Seite.

<li><a href="{link}">{name}</a></li>


Ordner:

Mögliche Templatevariablen: {name}, {link}, {desc}, {id}, {tabindex}, {first}...{/first}, {last}...{/last}, {folder}

Quelltext für die Darstellung der angezeigten Ordner.

<li><a href="{link}">{name}</a>{folder}</li>

Aktiver Ordner:

Mögliche Templatevariablen: {name}, {link}, {desc}, {id}, {tabindex}, {first}...{/first}, {last}...{/last}, {folder}

Quelltext für die Darstellung der aktiven Ordner.

<li><a href="{link}">{name}</a>{folder}</li>


Beispiel für eine Template-Einstellung:

Bild:Listennavi_093_template.png


Nicht vergessen: Sollen die durchgeführten Änderungen auch in den Templates und Seiten übernommen werden, so ist der Punkt "Einstellungen in den Templates /Ordnern / Seiten übernehmen, welche dieses Modul verwenden" auszuwählen. (Einstellungen übernehmen)

Weitere Beispiele:

Für die nachfolgenden Beispiele A und B sollte der Ordnername gleich lauten wie die erste Seite im Ordner sein.

Beispiel A

Startordner: Root

Anzeigeart: Ordner mit Seiten

Startseiten anzeigen: ja

Pfad als aktiv verfolgen: ja

Ebene: <ul>{layer}</ul>

Seiten: <li class="navseite"><a href="{link}">{name}</a></li>

Aktive Seite: <li class="istnavseite">{name}</li>

Ordner: <li class="navordner"><a href="{link}">{name}</a></li>

Aktiver Ordner: <li class="folder">{folder}</li>


Beispiel B

Startordner: Root

Anzeigeart: Ordner mit Seiten

Ordner nur als aktiv markieren, wenn Startseite angezeigt wird; Ja

Ebene: <ul>{layer}</ul>

Seiten: <li class="navseite"><a href="{link}">{name}</a></li>

Aktive Seite: <li class="istnavseite">{name}</li>

Ordner: <li class="navordner"><a href="{link}">{name}</a></li><li class="folder">{folder}</li>

Aktiver Ordner: <li class="istnavordner">{name}</li><li class="folder">{folder}</li>

[bearbeiten] Weiterführende Informationen

Für die Formatierung mit Hilfe von Stylesheets (css) sind hier im Wiki unter WEB Seiten bauen einige hilfreiche und nützliche Links aufgeführt. Zu empfehlen sind die Seiten unter Layouts.

Persönliche Werkzeuge