![]() |
|
![]() |
||||||||||||||||||||||||||||||||||||||||||||||||||
|
![]() |
Teil 15: Web-BaukastenBaum-Menüs Normale Links und auch solche in Steuerframes kennt inzwischen jeder. Überraschen Sie die Besucher Ihrer Homepage doch mal mit einer ganz anderen Form der Navigation nämlich mit einer Baumstruktur, wie man Sie auch vom Windows-Explorer her kennt. Der Umgang mit dem Windows Explorer dürfte jedermann vertraut sein, daher ist eine Benutzerführung, die dessen Funktionsweise nachbildet, sofort verständlich. Schauen wir also in diesem Baukasten, wie sich so ein Baum auf einer Web-Seite realisieren läßt. Es soll, analog zum Wurzelverzeichnis im Explorer, den Startpunkt "Home" geben, der den Menübaum auf- und zuklappt und die Startseite aufruft. Ist der Menübaum aufgeklappt, sieht man die Menüs, die wiederum die eigentlichen Verweise zu den Dokumenten der Website enthalten.
JavaScript pur Die vom Benutzerverhalten abhängigen Veränderungen am Menübaum lassen sich natürlich mit reinem HTML nicht verwirklichen es sei denn, man schriebe für jede mögliche Variante des Menüs eine neue Seite, die dann nachgeladen würde. Viel zu Aufwendig! Der Ausweg ist eine recht einfache Lösung, mit JavaScript. Der Grundgedanke dabei ist, die HTML-Tags für die jeweils richtige Menüdarstellung von JavaScript direkt in die Seite schreiben zu lassen. Eine entsprechende Funktion könnte man einfach über den "onClick"-Event-Handler mit den Menüpunkten verknüpfen, und das Menü wäre fertig wenn nicht beim Überschreiben der Menüseite quasi ein neues Dokument geöffnet würde und somit alle Funktionen und Variablen des bisherigen nicht mehr bekannt wären. Die Lösung ist aber verblüffend einfach: Eine Navigationsseite wie der Menübaum wird sinnvollerweise in einem Frame links vom eigentlichen Inhalt dargestellt. Also plazieren wir den JavaScript-Code in der permanent vorhandenen Seite, die die Frameset-Definition enthält. Über ihre Namen können wir dann auf die Frame-Objekte zugreifen. Die in der Startseite definierten Variablen lassen sich im Menüdokument als "parent.variablenname" auslesen; will man umgekehrt aus der Startseite den Menü-Frame ansprechen, stellt man der Variablen oder Funktion den Namen, in unserem Fall "steuer", voran. Den kompletten Artiekl finden Sie wie immer im Heft. Markus Hülsmann/osc
|
||||||||||||||||||||||||||||||||||||||||||||||||||
![]() ![]() |
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
Letzte Änderung 11.08.99 · Copyright 1998 Internet-Magazin · Design by webcon · hosted by GLOBAL ACCESS