Funktionalität

Dieses Skript erlaubt verschachtelte Listenstrukturen als einen „faltbaren” Baum darzustellen, dessen Knoten die Surferin durch einen Mausklick ein- und ausblenden kann. Es wird durch die CSS-Regeln treelist.css (Quelltext) ergänzt.

Variablen eines Treelist-Objekts

var treelist = new Treelist ();

Das Objekt treelist hat die folgenden Variablen:

treelist.le

Ein Element mit diesem Namen ist ein „Container” für Knoten der Baumstruktur. Ein solches Element repräsentiert selbst keinen Knoten, wird aber selbst nach Knoten und Containern durchsucht. Dem Konstruktor kann ein „Container”-Element oder ein „Knotenelement” als Parameter übergeben werden.

Voreingestellt ist der Elementname ul.

Ein Containerelement ist nicht erforderlich. Eine Baumansicht kann zum Beispiel nur aus verschachtelten div-Elementen als Knoten mit h2-Elementen oder button-Elementen als „Schaltern” aufgebaut sein. In diesem Fall ist es sinnvoll, wenn die Werte treelist.le und treelist.li übereinstimmen. Dadurch lassen sich konkrete Baumansichten einfacher erzeugen.

treelist.li

Ein Element mit diesem Namen (Knotenelement) repräsentiert einen „Knoten” der Baumansicht. Ein Knoten kann einen „Schalter” (treelist.se) enthalten, der die Darstellung des Knotens umschaltet zwischen „expandiert” und „eingefaltet”. Der Schalter ändert nicht die CSS-Regeln zur Darstellung des Knotens direkt, sondern tauscht Wörter (treelist.kc, treelist.kx) in einem Attribut (treelist.an) des Knotenelements aus.

Der Knoten kann weitere untergeordnete Knoten oder Container enthalten. In diesem Fall muss der Schalter vor allen enthaltenen Knoten und Containern stehen, andernfalls wird das Element nicht als Schalter erkannt.

Voreingestellt ist der Elementname li.

Bei der Initialisierung einer Baumansicht (einer „Instanz”) werden die Inhalte von Knotenelementen und Containerelementen rekursiv durchlaufen. Knotenelemente werden zusätzlich nach „Schaltern” (treelist.se) durchsucht und markiert. Knotenelemente sind in diesem Sinne immer auch Container-Elemente.

treelist.se

Ein Kindelement eines Knotens (treelist.li) mit diesem Namen repräsentiert einen „Schalter”, der die Darstellung des Knotens umschaltet. Der Ereignisbehandler (treelist.ev) dieses Elements tauscht die Wörter treelist.kc und treelist.kx im Attribut treelist.an des Elternelements aus.

Ein Schalter wird nur dann als Schalter erkannt, wenn er vor allen enthaltenen (untergeordneten) Knoten und Containern steht.

Voreingestellt ist der Elementname span.

treelist.kc

Das Wort treelist.kc im Wert des Attributs treelist.an kennzeichnet einen Knoten (treelist.li) als „eingefaltet”. Die tatsächliche Darstellung bestimmen CSS-Regeln.

Voreingestellt ist das Wort „c”.

treelist.kx

Das Wort treelist.kx im Wert des Attributs treelist.an kennzeichnet einen Knoten (treelist.li) als „expandiert”. Die tatsächliche Darstellung bestimmen CSS-Regeln.

Voreingestellt ist das Wort „x”.

treelist.kl

Knoten (treelist.li), in denen kein Schalter (treelist.se) erkannt wird, können durch diesen Wert des Attributs treelist.an gekennzeichnet werden, falls das Knotenelement anfangs kein Attribut mit diesen Namen hat.

Voreingestellt ist die leere Zeichenkette. In diesem Fall wird das Attribut nicht gesetzt.

treelist.df

Wenn diese Zeichenkette definiert und nicht leer ist, bekommen Knoten (treelist.li) mit einem Schalter (treelist.se), die anfangs kein Attribut mit dem Namen treelist.an enthalten, das Attribut treelist.an mit diesem Wert (treelist.df).

Voreingestellt ist der Wert „c”. Es entspricht der eingefalteten Darstellung (s. treelist.kc)

treelist.an

Der Name eines Attributs eines Knotens (treelist.li). Bei der Initialisierung wird dieses Attribut gesetzt, falls es nicht bereits existiert. Die Ereignisbehandler (treelist.ev) der Schalter (treelist.se) tauschen Wörter im Wert dieses Attributs aus.

Voreingestellt ist der Attributname class.

treelist.kn

Wenn das Attribut treelist.an eines Elements mit dem Namen treelist.li oder treelist.le das Wort treelist.kn oder das Wort treelist.kt enthält, wird das Element nicht als Knoten oder Container innerhalb eines Knotens, sondern wie anderer Inhalt behandelt.

So ist es möglich, dass innerhalb einer Baumansicht eine Baumansicht verschachtelt ist, die auf eine andere Weise funktioniert.

Voreingestellt ist das Wort „nofld”.

treelist.kt

Wie das Wort treelist.kn verhindert dieses Wort im Wert des Attributs treelist.an, dass das Element als verschachtelter Container oder Knoten behandelt wird. Das Wort kennzeichnet aber Container-Elemente, bei denen die Initialisierung ansetzt, s. treelist.mk.

Voreingestellt ist das Wort „tree”.

treelist.ev

Der Name des Ereignisses, das den „Schalter” drückt. Voreingestellt ist „click”. Für manche Nutzer könnte „dblclick” oder „mouseover” sinnvoll sein.

treelist.mk (el)

Die Methode mk erzeugt konkrete Baumansichten.

Wenn als Parameter el ein Element übergeeben wird, so werden Knoten und Container unter den Kindelementen von el gesucht, die Knoten gekennzeichnet und den Schaltelementen Ereignisbehandler zugeordnet.

Wenn der Parameterwert nicht definiert ist, werden alle Elemente mit dem Namen treelist.le und dem Wert treelist.kt des Attributs treelist.an als Container (der obersten Ebene) behandelt, aber nicht als Knoten.