Dateien

GLlist besteht aus:

- den Aufrufen in den HTML-Dateien
- der CSS-Datei für die Darstellung des Baumes - der Scriptdatei die die Abläfe steuert

HTML-Einbindung

Im Head der HTML-Seite müssen, neben Ihren eigenen Dateien, das Tree-Script und die dazugehörige CSS-Datei eingebunden werden:

<link rel="stylesheet" type="text/css" href="css/gllist.css">
<script type="text/javascript" src="script/gllist.js"></script>

Grundsätzlich benötigen wir ein <div>-Element in dem der Tree dargestellt werden soll. Dieses Element benötigt eine eindeutige ID (z.B. gllist). Für die Darstellung fügen Sie noch class="zeile" hinzu.
Nachdem so alle Elemente (falls es mehrere Listen auf der Seite geben soll) ihren Platz gefunden haben, rufen Sie Ihre Java-Script Initialisierungsfunktion auf:
  <script type= "text/javascript">urladen();<script> (Bspw.)

Stylesheet

Für die Baumansicht benötigen Sie einige Einträge in Ihrem Stylesheet zu dem div-Element des Baumes:

overflow: auto;
width und height nach Ihren Anforderungen,
border, background und color ebenso,
margin und padding falls notwendig

Die Infobox links sieht so aus:

#beispiele {
display: block;
overflow: auto;
width: 350px;
height: 200px;
border: 1px solid black;
background: white;
color: black;
font-size: 12pt;
padding-top: 5px;
padding-left: 5px;
margin: 5px;
}

Alle anderen notwendigen Style- Eintragungen finden Sie in der gllist.css.

Java-Script

Für die Darstellung Ihrer Daten benötigen Sie ein paar kleine Java-Script Funktionen:
Eine Funktion zur Initialisierung des Tree, eine Ladefunktion und eine Funktion falls die Anwender auf einen Text (Folder oder Node) klicken.

Initialisierung

Um einen Baum erstmals mit Daten der ersten Ebene zu befüllen, verwenden Sie die Initialisierungsfunktion. Vorher deklarieren Sie die für die Box benötigte Variable:

z.B. var d = "";

Irgendwo danach kommt dann die Initialisierung:

z.B. function urladen () {
d = new gllist(<Initialisierungwerte>);
<hinzufügen der ersten Ebene mittels d.add()>
d.show();
}

Nach dem d.show(); steht die erste Ebene zur Auswahl in der Box bereit.
Natürlich können Sie hier auch einige wenige Werte quasi von Hand einfügen (Beispiel dieser Seite):

b.add(0, 1, "Informationen", 0);
b.add(0, 2, "Dateien", 1);
b.add(0, 3, "GLlist", 1);

In der Realität werden Sie aber eher innerhalb einer Schleife die Ergebnisse einer Ajax-Anfrage an Ihren Server eintragen lassen.

Ladefunktion

Klickt ein Anwender auf einen Folder, so möchte er die nächste Ebene sehen. Nachdem diese vermutlich nicht geladen ist, wird Ihre in der Initialisierung angegebene Ladefunktion mit der Id des gewählten Folders aufgerufen. Auch hier kommt die add()-Funktion zum Einsatz. Haben Sie nur wenige, vorher bekannte Einträge, so können diese ebenfalls "von Hand" eingeschoben werden, realitätsnäher ist jedoch auch hier ein Ajax-Aufruf an Ihren Server die entsprechenden Daten zu liefern und die Befüllung innerhalb einer Schleife mittels .add().Hier die Ladefunktion für die 2. Box links:

function laden (id) {
var typ = 1;
var anz = id.toString();
if (anz.length > 3) {
typ = 0;
}
for (var i=1; i<5; i++) {
var nid = id*10+i;
d.add(id, nid, "Folder "+nid, typ);
}
d.show();
}

Hier werden bis zu einer bestimmten Tiefe einfach neue Folderebenen angelegt.

Auswahlfunktion

Zuletzt benötigen Sie eine Auswahlfunktion die mit der Id des ausgewählten Eintrags aufgerufen wird wenn der Benutzer auf einen Text klickt. Anhand der übermittelten Id können Sie entscheiden was als nächstes zu tun ist. Beispiel die Auswahlfunktion der unteren Box links:

function gewaehlt (id) {
alert("Wahl aus Box 2: id("+id+")");
}

Im "richtigen Leben" werden Sie auch hier mit einer Ajax-Anfrage an Ihren Server notwendige Daten zum Client holen und darstellen.

Referenz

Hier finden Sie eine kleine Referenz für alle Funktionen und Dateien von GLlist

Funktionen

In dieser Version verfügt GLlist über drei einfach Funktionen:

-den new-Konstruktor
- die add-Funktion um eine neue Zeile einzufügen
- die show-Funktion um die gerade eingefügten Daten eines Subfolders anzuzeigen.

Konstruktor

<Variable> = new gllist(<Variablenname>, <Containername>, <Ladefunktion>, <Lademodus>, <Auswahlfunktion>, <Bildertyp>, <Bilderpfad>);

Variablenname: Name der Variable über die wir den Baum erreichen
Containername: Name des div-Containers in dem der Baum dargestellt werden soll
Ladefunktion: Funktion die beim Nachladen von Zeilen für eine ID aufgerufen werden soll
Lademodus: 0|1 - 0=zu öffenden Folder immer erst laden, 1=bereits geladene Folder merken und nicht nachladen
Auswahlfunktion: Funktion die bei Klick auf den Text eines Folders oder eines Node mit dessen ID aufgerufen werden soll
Bildertyp: 0|1 - 0=+/- Symbole 1=Folder/Node Symbole
Bilderpfad: Pfad auf dem Server wo unsere Bilder liegen (immer mit abschliessendem / !!)

Beispiel:

d = new gllist("d", "gllist", laden, 0, auswahl, 1, "resource/");

Eintrag hinzufügen - add()

<Variable>.add(<VaterId>, <Id>, <Text>, <Typ>);

Variable: Konstruktorvariable
VaterId: Id des Folders unterhalb dessen diese Zeile eingefügt werden soll
Text: Der Text der dargestellt werden soll
Typ: 0|1 - 0=Node 1=Folder

Beispiel:

d.add(0, 1, "erster Folder", 1);

Besonderheiten:

- vor einem show() dürfen nur Werte zu einem Vaterobjekt hinzugefügt werden
- die höchste Ebene ist immer Ebene 0

Einträge anzeigen - show()

<Variable>.show();

Variable: Konstruktorvariable

Besonderheiten:

- vor einem show() dürfen nur Werte zu einem Vaterobjekt hinzugefügt werden

GLlist Stylesheet

.zeile {
margin: 0px;
padding: 0px;
clear:left;
vertical-align:middle;
}
.oeffnen {
float: left;
border: 0px;
}
.oeffnen a {
text-decoration: none;
font-weight: bold;
border: 0px;
float: left;
}
.bild {
border:0px;
float:left;
}
.linie {
float: left;
padding: 0px;
padding-left: 5px;
margin: 0px;
}
.text {
font-size: 12px;
float: left;
text-decoration: none;
color: black;
}
.text a {
text-decoration: none;
color: black;
float: left;
}
.akttext {
width: 90%;
font-size: 12px;
}
.akttext a {
text-decoration: none;
color: blue;
float: left;
}
.vater {
display: none;
}
.inhalt {
}
.inhalt_u {
display: none;
float: left;
}

GLlist Java-Script

Nachdem das Script knapp 300 Zeile hat, verzichte ich einstweilen mal darauf es hierher zu stellen. Gedacht hatte ich diesen Teil für Erweiterungen und Ergänzungen...

getestete Browser

Linux
Firefox 2.0
Konquerer 3.2

Windows
Firefox 2.0
IE 5.5
IE 6.0
IE 7.0
Opera

download

Version 0.3.2 vom März 2007: gllist0.32.zip
Enthält GLlist 0.3.2 und diese Beispielseiten

Historie