Wie programmiert man Baumstruktur mit Javascript?

[reinhard]

Hallo Leute,
man sieht jetzt häufig Menüs, die wie der Dateiexplorer aus einer Baumstruktur bestehen. Man kann "Äste" mit + und - auf- bzw. zuklappen. Im Internet gibt es auch Anbieter fertiger Skripte, die soetwas generieren(schöne Beispiele unter http://www.gosu.pl/MyGosuMenu/, Stichworte "Dynamic Tree" und "Tree Menu" wenn man nach unten scrollt).
Diese Scripte sind mir aber zu unübersichtlich und ich mag mich auch nicht einem Hersteller "ausliefern". Deshalb die Frage: wie programmiert man solche Baumstrukturen mit Javascript? Wie macht man das + und -, die gepunkteten Linien u.ä.? Würde mich interessieren, ob es dazu Stichworte in selfhtml gibt.
Viele Grüße,
Reinhard

[Felix Riesterer]

Lieber reinhard,

guckst Du: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern und dann liest Du die Seite von ganz vorn durch.

Liebe Grüße,

Felix Riesterer.

[LX]

Ich glaube, er meinte eher so eine Baumstruktur, wie sie im Windows Explorer auf der linken Seite zu finden ist...

Gruß, LX

P.S.: hast Du die Noten, die ich Dir geschickt habe, schon mal angesehen?

[LX]

Es gibt verschiedene Lösungen mit/aus verschiedenen Frameworks, bspw. Dojo etc. Um selbst eine solche Lösung zu schreiben, solltest Du Dir zunächst einmal Gedanken um die Struktur Deines Baums machen (verschachtelte ULs machen Sinn.)

Das + und - kannst Du per CSS hinzufügen, Auf- und Zuklappen durch CSS und JavaScript, indem Du eine CSS-Klasse setzt, welche die Kindelemente aus- bzw. einblendet.

Wie Du siehst, erfordert die Lösung mehr CSS als JavaScript.

Gruß, LX

[Felix Riesterer]

Lieber LX,

Das + und - kannst Du per CSS hinzufügen, Auf- und Zuklappen durch CSS und JavaScript, indem Du eine CSS-Klasse setzt, welche die Kindelemente aus- bzw. einblendet.

z.B. so: Download-Ordner

Liebe Grüße,

Felix Riesterer.

[reinhard]

Hey Felix,
der Dateibaum in Deinem Beispiel sieht genau so aus, wie ich ihn auch gerne hätte (super). Wie hast Du das + und - gemacht??? In der anderen Mail hat LX über css geschrieben. Wie heißt das Kommando?
Gruß, Reinhard

[Felix Riesterer]

Lieber reinhard,

der Dateibaum in Deinem Beispiel sieht genau so aus, wie ich ihn auch gerne hätte (super).

na, dann los!

Wie hast Du das + und - gemacht???

Das sind per CSS eingebundene Hintergrundgrafiken.
http://www.peutinger-gymnasium.de/html/js/explorer/images/plusbottom.gif
bzw.
http://www.peutinger-gymnasium.de/html/js/explorer/images/minusbottom.gif

In der anderen Mail hat LX über css geschrieben.

LX hat Dir Mails geschickt? Das nenne ich aber zuvorkommend. Das tut er sonst nicht, da man ja hier die Lösung für alle haben möchte.

Wie heißt das Kommando?

Das Kommando heißt: "Forumsarchiv solange durchsuchen, bis Du weitere Posts zu diesem Thema von Felix Riesterer gefunden und studiert hast. Danach <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=lerne CSS>, damit Du bereits genannte Links sinnvoll studieren kannst!"

Du findest im Archiv auch etwas zu meiner PHP-Lösung, die den HTML-Code erzeugt - abhängig von der Verzeichnisstruktur.

Alles andere (Grafiken und JavaScript) kannst Du Dir ja bequem aus dem Quelltext meiner Seite herausfischen. Dazu habe ich sie Dir ja verlinkt!

Liebe Grüße,

Felix Riesterer.

[reinhard]

Hallo Felix,

nach Analyse Deiner eindrucksvollen Baumstruktur für Downloads bin ich zu der Erkenntnis gekommen, daß ich in der Tat ziemlich auf dem Holzweg war ... Diese "Bäume" sehen im Internet immer so perfekt aus, daß ich davon ausgegangen war, es müsse irgendwelche css-Befehle geben, die das Kreuzchen und die Hilfslinien erzeugen. Deine Struktur hat mir gezeigt, daß alle Komponenten des Baums Einzelgrafiken sind, die mit css und javascript zu einer Struktur auf Basis einer ganz normalen <ul>- bzw. <li>-Liste zusammengebaut wurden. Insofern auch Dank an LX für den Hinweis auf css.
Ich habe inzwischen einen akzeptablen Baum gebastelt und betrachte das Problem somit als erledigt und dies Posting als abgeschlossen.
Vielen Dank an alle, die Hinweise gegeben haben.

Grüße,
Reinhard

[reinhard]

Hey Felix und LX,
Eure Tips machen mir Hoffnung, das selbst hinzukriegen. Wenn Ihr mir nur genauer verraten könntet, wie ich das + und - in css hinbekomme. Ich habe in einem Website gesehen, daß man z.B. mit einer verschachtelten <div>-Struktur arbeiten kann. Aber das + und - macht mir echt Kopfschmerzen ...
Grüße, Reinhard

[ChrisB]

Hi,

Aber das + und - macht mir echt Kopfschmerzen ...

Was denn fuer Kopfschmerzen?
Die ueblichen "Oh mein Gott, vielleicht muesste ich mal selber Suchen gehen, denn ich bin vielleicht nicht der erste, der auf einen Klick hin bestimmte Teilbereiche eines HTML-Dokumentes ein- und ausblenden lassen will"-Kopfschmerzen?
Keine Sorge, die sind nicht lethal, du kannst es also ruhig mal probieren.

MfG ChrisB

[Cheatah]

Hi,

Ich habe in einem Website gesehen, daß man z.B. mit einer verschachtelten <div>-Struktur arbeiten kann.

LX hat Dir einen Tipp für eine sehr viel bessere Struktur gegeben. Bedenke, dass die Struktur absolut unabhängig davon ist, ob sie mit +, - und gestrichelten Linien dargestellt wird, ob der Nutzer (falls die Betrachtung durch einen solchen durchgeführt wird) JavaScript aktiviert hat und so weiter. Deine Navigation muss auch ohne all das funktionieren und sinnvoll sein.

Aber das + und - macht mir echt Kopfschmerzen ...

Nimm die gegebene HTML-Struktur, denke nicht an Bäume oder sonstwas, und überlege Dir, wie Du dem einen Navigationseintrag einen, sagen wir, Hausschuh voranstellst und dem anderen eine Spraydose. Nun ersetze Hausschuh und Spraydose durch + und -.

Cheatah

[reinhard]

OK.
Dann also mal die ganz banale Frage: wie bekomme ich das + und - verbunden durch punktierte Linien hin? Angeblich geht es mit css, aber ich finde keine Themen / Einträge in selfhtml. Ob und wie ich dieses Wissen anwende, überlege ich mir danach.

Schöne Grüße,
Reinhard

[ChrisB]

Hi,

Dann also mal die ganz banale Frage: wie bekomme ich das + und - verbunden durch punktierte Linien hin?

Du kannst die Zeichen + und - auf deiner Tastatur nehmen.
Oder stattdessen Bilder verwenden, wenn dir diese schicker erscheinen.

Angeblich geht es mit css, aber ich finde keine Themen / Einträge in selfhtml.

http://de.selfhtml.org/css/eigenschaften/rahmen.htm
Oder wiederum, (Hintergrund-) Bilder.

Ob und wie ich dieses Wissen anwende, überlege ich mir danach.

OK, dann fang an.

MfG ChrisB

[Cheatah]

Hi,

Dann also mal die ganz banale Frage: wie bekomme ich das + und - verbunden durch punktierte Linien hin?

öhm, indem Du nur einen Pixel von der Linie nimmst (idealerweise einen, der wie ein Punkt aussieht) und ihn in hinreichend viele hinreichend günstig positionierten Elementen verwendest. Andererseits: Wer um Himmels Willen hat behauptet, Du solltest für die Symbole + und - eine gepunktete Linie verwenden?

Cheatah