Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

Beide Skripte verwenden die gleiche Syntax für die Angabe der Baumstruktur.
Wenn sie also beide downloaden möchten um z.Bsp. eine alternative Version für
ältere Browser anzubieten, können sie beide Skripte so konfigurieren, dass sie
mit den gleichen Navigationsdaten arbeiten.

Beschreibung:

Sie kennen sicherlich Navigationsbäume: das sind kleine Skripte, die in einer Navigationsleiste ein Inhaltsverzeichnis mit Überschriften anzeigen. Wird eine Überschrift angeklickt, werden die dazugehörenden Einträge angezeigt. Und ein Klick auf die Einträge öffnet direkt das dazugehörige Dokument.

Das Skript können sie hier downloaden - unten auf dieser Seite finden sie eine Beschreibung der Konfiguration.

Das Skript...

Dies ist eine der seltenen Gelegenheiten bei denen ich darauf verzichten werde, den Quelltext zu erläutern.
Warum? Erstens: weil er zu lang ist, um daraus etwas zu lernen und zweitens: auch zu kompliziert um ihn in ein paar Zeilen zu erläutern.

Eine eher persönliche Anmerkung zum Skript: es gibt mehrere Lösungen und dutzende Versionen ähnlicher Skripte im Netz.
Die Umsetzung als "echtes" Baumkonstrukt ist meiner Ansicht nach die sauberste, allerdings zu kompliziert für den Laien, der das Skript am Ende konfigurieren muss.
Daneben sind mir Alternativen bekannt, welche mit Ebenendarstellungen oder "Foldern" arbeiten - ich habe mich hier dafür entschieden, die Einträge schlicht und ergreifend zu gruppieren.
Nicht, weil es "besonders schön" wäre - sondern weil es am leichtesten verständlich und einfach umzusetzen ist.

Konfiguration...

Das Paket besteht aus mehreren JavaScript Dateien, 3 Grafiken und 2 HTML Dateien.

HTML	index.html	Eine Beispielframeseite
	nav.html	eine Dummy-Seite für Opera
JavaScript	skript.js	Das Navigationsskript
	settings.js	Datei mit Formatierungsanweisungen
	files.js	Liste der Einträge
Grafiken	blank.gif
	geoeffnet.gif
	geschlossen.gif

Es handelt sich um ein ZIP-Archiv - also extrahieren sie zunächst alle Dateien in ein beliebiges Verzeichnis.

In "settings.js" finden sie eine Reihe Einstellungen, die sie modifizieren können.
Unter anderem den Zielframe der Navigationsleiste etc. - diese sind weitestgehend selbsterklärend.

Der eigentlich interessante Teil ist: wie sie ihre Navigationsstruktur in die Datei bekommen...
Dazu öffnen sie zunächst die Datei "files.js".

Hier sind alle Überschriften und Einträge in genau der Reihenfolge angegeben, in welcher sie später auch erscheinen sollen. 

ueberschrift('TITEL', 'GRUPPEN');
link('TITEL', 'URL', 'GRUPPEN');

TITEL	der angezeigte Text
URL	Link auf die Zieldatei (bei Überschriften leer lassen)
GRUPPEN	Liste der Gruppen, zu denen der Eintrag gehört - durch "," getrennt.

Titel und URL werden sicher klar sein - kommen wir zu den Gruppen:

Mit "Gruppen", sind Gruppierungen von zusammengehörenden Überschriften und Einträgen gemeint.
Wenn sie also eine "Überschrift 1" und verschiedene Einträge (1,2,3,...usw.) haben, sind alle in der selben Gruppe (z.Bsp. Gruppe "1").

Falls sie als Unterpunkt der "Überschrift 1" nun zwei weitere Überschriften "2" und "3", sowie zugehörige Einträge angeben wollen, gehören beide jeweils in eine eigene Gruppe (z.Bsp. Gruppe "2" und "3"), ABER auch in die übergeordnete Gruppe.
Das schreiben sie so: "1,2" bzw. "1,3".

Beispiel:

Überschrift 1                  = Gruppe(n) 1
  .->Eintrag 1 (1.html)        = Gruppe(n) 1
  .->Eintrag 2 (2.html)        = Gruppe(n) 1
  .->Überschrift 2             = Gruppe(n) 1,2
      .-> Eintrag 3 (3.html)   = Gruppe(n) 1,2
Überschrift 3                  = Gruppe(n) 3
 ...

Das komplette Beispiel sieht in der Zieldatei aufgeschrieben dann so aus:

ueberschrift('Überschrift 1', '1');
  link('Eintrag 1', '1.html', '1');
  link('Eintrag 2', '2.html', '1');
  ueberschrift('Überschrift 2', '1,2');
    link('Eintrag 3', '3.html', '1,2');
ueberschrift('Überschrift 3', '3');

Die Datei enthält bereits einige ähnliche Beispieleinträge...

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: