Treemenü mit Tabellen
Daniel
- javascript
0 Gernot Back0 Daniel0 Gernot Back0 GHopper
0 GHopper
Hallo,
ich versuche ein Tree-Menü mit Hilfe von Tabellen umzusetzen. Dabei habe ich mich an der Seite http://www.dynamic-media.de/?page=art5 orientiert, nur leider klappt das bei mir nicht so wie es soll. Der Code:
[...]
<script language="JavaScript1.2">
<!--
function perform(e)
{
if (document.all(e).style.display == "none")
{
document.all(e).style.display = "block";
}
else
{
document.all(e).style.display = "none";
}
}
//-->
</script>
[...]
<table>
<tr id="Spiele">
<td><a href=# onClick="perform('Spiele')">Spiele</a></td>
</tr>
<tr id="Spiele" style="display:none" style=&{head};>
<td valign="top" width="230px" >
<table><tr><td>
Test
</td></tr></table>
</td>
</tr>
</table>
[...]
Hab es schon mit verschiedenen IDs versucht, hilft nichts. Ich bekomme für gewöhnlich die Meldung document.all(...).style.display ist NULL oder kein Objekt. Hab mich schon informiert, aber leider keinen Hinweis auf die mögliche Ursache gefunden.
Hat jemand einen Tipp?
Gruß, Daniel
Hallo Daniel,
ich versuche ein Tree-Menü mit Hilfe von Tabellen umzusetzen. Dabei habe ich mich an der Seite http://www.dynamic-media.de/?page=art5 orientiert, nur leider klappt das bei mir nicht so wie es soll. Der Code:
function perform(e)
{
if (document.all(e).style.display == "none")
{
document.all(e).style.display = "block";
}
else
{
document.all(e).style.display = "none";
}
}
Hab es schon mit verschiedenen IDs versucht, hilft nichts. Ich bekomme für gewöhnlich die Meldung document.all(...).style.display ist NULL oder kein Objekt. Hab mich schon informiert, aber leider keinen Hinweis auf die mögliche Ursache gefunden.
Ich hoffe doch sehr, dass die IDs auch in _jeder_ Tabellenzeile _jeweils_ verschieden sind.
Hinter "all" gehören auch, wenn überhaut, eckige Klammern und keine runden.
http://de.selfhtml.org/javascript/objekte/all.htm
Allerdings verstehen viele Browser das All-Objekt gar nicht, deshalb solltest du alternativ auch mit document.getElementById() arbeiten.
Es gibt aber auch einen sehr schönen Tipps&Tricks-Artikel:
http://aktuell.de.selfhtml.org/tippstricks/dhtml/treemenu/index.htm
Da wird mit Listen statt mit Tabellen gearbeitet, was ich für eleganter halte.
Gruß Gernot
Hallo,
Allerdings verstehen viele Browser das All-Objekt gar nicht, deshalb solltest du alternativ auch mit document.getElementById() arbeiten.
Danke für den Tipp, auch an GHopper. Schon eine kurze Recherche führte zu Tage, dass mit all zu arbeiten weder elegant noch zukunftsicher ist.
http://aktuell.de.selfhtml.org/tippstricks/dhtml/treemenu/index.htm
Da wird mit Listen statt mit Tabellen gearbeitet, was ich für eleganter halte.
Die Seite war mir bekannt, es ging eben darum das _nicht_ mit listen zu verwirklichen, zumal ich versuchen wollte, das so einfach wie möglich zu verwirklichen, ohne seitenlangen Quellcode. Zumal: Wieso sind Listen "eleganter"?
Ich werde mir eure Tipps zu Herzen nehmen und schauen was sich machen läßt.
Auf jeden Fall vielen Dank!
Hallo Daniel,
http://aktuell.de.selfhtml.org/tippstricks/dhtml/treemenu/index.htm
Da wird mit Listen statt mit Tabellen gearbeitet, was ich für eleganter halte.
Die Seite war mir bekannt, es ging eben darum das _nicht_ mit listen zu verwirklichen, zumal ich versuchen wollte, das so einfach wie möglich zu verwirklichen, ohne seitenlangen Quellcode. Zumal: Wieso sind Listen "eleganter"?
Ich gehöre hier wahrlich nicht zu der orthodoxen Fraktion, aber dass es sich bei einem Menü tatsächlich um eine Auflistung von Links und keine tabellarische Übersicht handelt, leuchtet mir ein. Leute mit Screenreadern können so eine Struktur einfach besser verstehen.
Wenn dir der JS-Quellcode in dem Tipps&Tricks-Artikel zu lang ist; ich habe da ja auch mal eine Version eines Listenmenüs gebastelt, die allerdings mit Safari und Konqueror noch nicht läuft. Aber ich arbeite dran. Vielleicht hat ja auch jemend einen Tipp für mich:
http://www.sprachlernspiele.de/selftests/klappmenue/
Gruß Gernot
Guten Morgen Gernot,
leider kann ich Dir den gewünschten Tipp auf den ersten Blick nicht liefern, werde es mir allerdings nochmal genauer betrachten. Dein DOM-basierte JavaScript Menü hat natürlich den Vorteil erhöhter Flexibilität, allerdings würde ich gerne einmal nach etwas anderem fragen:
Was bedeutet der Stern in der folgenden Stylesheet-Definition?
* {
font-family:Arial, Verdana, Helvetica, Swiss, sans-serif;
}
Gruss,
GHopper
Hallo,
Was bedeutet der Stern in der folgenden Stylesheet-Definition?
* {
http://www.w3.org/TR/CSS21/selector.html#universal-selector
viele Grüße
Axel
Guten Morgen,
grundsätzlich hattest Du eine klasse Idee, allerdings ist von der Verwendung des Microsoft-basierten all mit Blick auf zukünftige Versionen und neue Browser abzuraten, die zwar funktioniert, aber nicht standardkonform ist. Ich habe mir erlaubt ein <a href="http://websitewartung.de/javascript.html">Beispiel zum Thema JavaScript-basierten Menü mit Baumstruktur</a> zu erstellen und mich dabei weitgehend an Deinem Beispiel orientiert. Schau doch einfach mal ob Dir das weiterhilft.
Gruss,
GHopper