Anzeige
Tutorialbeschreibung

Javascript und Ajax - Navigation

Javascript und Ajax - Navigation

[Javascript und Ajax] Navigation 31

Dieses Kapitel behandelt die Navigation mit Pulldown-Menüs, sowie mit DHTML.


Wir werden in alle Richtungen expandieren. – Wim Wenders

Kapitel 31 Navigation

Was ist Navigation (auf einer Website)? Nun, es mag hierzu mehrere Definitionen geben, aber die Grundidee ist immer dieselbe: Dem Benutzer wird die Möglichkeit gegeben, die verschiedenen Bereiche einer Website zu erreichen. Im World Wide Web gibt es genügend Beispiele für gute und schlechte Navigation, doch das soll nicht das Thema dieses Buches sein. In diesem Kapitel geht es darum, Möglichkeiten für Navigation aufzuzeigen – natürlich mit unserer Lieblingsskriptsprache, JavaScript.

Die profane Variante – Navigation über pure Links – lassen wir dabei außer Acht. Wir sehen uns stattdessen an, was JavaScript sonst noch so an Mitteln bietet.

Eine Hauptanforderung an ein Navigationskonzept besteht darin, möglichst viele Informationen auf möglichst wenig Raum unterzubringen. Aus diesem Grund ist von den meisten Informationen auf den ersten Blick nichts zu sehen, sondern erst auf den zweiten.

Wir werden in diesem Kapitel zwei verschiedene Konzepte vorstellen:

>

Navigation mit Pulldown-Menüs (eine einfache und eine komplexe Variante)

 

>

Navigation mit DHTML (wie im Windows Explorer – nun ja, fast)

Bei allen Umsetzungen sind anfangs nur die Oberbegriffe der einzelnen Navigationspunkte zu sehen. Die Unterbegriffe offenbaren sich erst nach einem Klick (oder einer Mausbewegung)


31.1 Navigation mit Pulldown-Menüs

Auf vielen Websites befinden sich ein so genanntes Schnellstartmenü oder Quicklinks. Diese Begriffe sind keineswegs offiziell, nur hat ein findiger Texter diese erfunden und einige andere haben sie übernommen. Gemeint ist, dass in einem Schnellstartmenü mehrere Seiten des aktuellen Angebots aufgelistet sind. Sobald der Benutzer einen der Einträge selektiert, wird die angegebene Seite geladen.

Dieser Effekt ist sehr leicht umzusetzen, wenn Sie die einzelnen Elemente korrekt zusammenstellen:

>

Um eine neue Seite in ein neues Fenster zu laden, müssen Sie die Eigenschaft location.href des entsprechenden Fensters oder Frames setzen.

 

>

Aus praktischen Gründen sollten Sie die zu ladende URL im value-Attribut des entsprechenden Eintrags ablegen:

<option value="http://www.opera.com/">Opera</option>

>

Die Funktion, die das Laden der neuen Seite auslöst, wird über den onchange-Event-Handler aufgerufen. Dieser wird genau dann aktiv, wenn ein anderer Eintrag im Pulldown-Menü aufgerufen wird.

<select name="Auswahl"
   onchange="navigation_laden(this);">

Die aktuelle Auswahlliste wird als Parameter an die Funktion navigation_laden() übergeben (this).

>

Alternativ dazu ist es auch möglich, zum Laden der neuen URL eine zusätzliche Schaltfläche anzubieten. Wenn diese angeklickt wird, wird die neue URL geladen:

<input type="button" value="Go!"
   onclick="navigation_laden(this.form.elements['Auswahl']);" />

Um eine Leseranfrage zu einer der Vorauflagen zu beantworten: Die URL muss natürlich nicht im aktuellen Fenster geöffnet werden, das kann auch in einem anderen Fenster oder Frame geschehen.

Aus diesem Grund wird die Funktion navigation_laden() folgendermaßen konzipiert:

>

Der erste Parameter ist die Referenz auf die Auswahlliste.

 

>

Der zweite, optionale Parameter ist eine Referenz auf das Fenster oder den Frame, in dem die URL geöffnet werden soll.

Der restliche Ablauf der Funktion navigation_laden() ist klar: Aus der Auswahlliste wird das selektierte Element bestimmt und dessen value-Eigenschaft ausgelesen. In den folgenden Fällen wird davon Abstand genommen, eine neue URL zu laden:

>

wenn das value-Attribut leer ist

 

>

wenn das value-Attribut aus einem Doppelkreuz besteht

Der Grund hierfür ist klar: Es gibt in der Auswahlliste unter Umständen Einträge, die nicht »verlinkt« werden sollen, beispielsweise leere Einträge (zur optischen Abgrenzung der restlichen Einträge) oder Einträge in der Richtung »---Bitte auswählen---«.

Hier sehen Sie die gewünschte Funktion (in der Datei navigation.js):

function navigation_laden(auswahl) {
   var arg = navigation_laden.arguments;
   var v = auswahl.options[auswahl.selectedIndex].value;
   if (arg.length > 1) {
      var w = arg[1];
   } else {
      var w = self;
   }
   if (v != "" && v != "#") {
      w.location.href = v;
   }
}

Im folgenden Listing finden Sie diese Funktionalität in einer HTML-Seite integriert:

<html>
<head>
<title>Navigation</title>
<script type="text/javascript" src="navigation.js"></script>

</head>
<body>
<h1>Navigation</h1>
<form onsubmit="return false;">
<select name="Auswahl"
   onchange="navigation_laden(this, self);">
<option value="http://www.microsoft.com/">Microsoft</option>
<option value="http://www.mozilla.com/">Mozilla</option>
<option value="http://www.opera.com/">Opera</option>
</select>
</form>
</body>
</html>

Damit Sie das Beispiel so anpassen können, dass die neue Seite erst nach dem Anklicken einer Schaltfläche geladen wird, müssen Sie eine weitere Schaltfläche einfügen, wie oben gezeigt wurde. Das entsprechende Listing würde dann folgendermaßen aussehen:

<html>
<head>
<title>Navigation</title>
<script type="text/javascript" src="navigation.js"></script>
</head>
<body>
<h1>Navigation</h1>
<form onsubmit="return false;">
<select name="Auswahl">
<option value="http://www.microsoft.com/">Microsoft</option>
<option value="http://www.mozilla.com/">Mozilla</option>
<option value="http://www.opera.com/">Opera</option>
</select>
<input type="button" value="Go!"
   onclick="navigation_laden(this.form.elements['Auswahl']);" />
</form>
</body>
</html>

 

Bilder

Abbildung 31.1     Navigation ohne Links, aber mit JavaScript

Diese Form von »Quicklinks« bietet einen direkten Zugriff auf mehrere Seiten, aber eine Verschachtelung ist hier nicht möglich. Im folgenden Beispiel finden Sie zwei Auswahllisten vor. Wenn Sie in der ersten Auswahlliste einen Eintrag auswählen, werden in der zweiten Auswahlliste die zugehörigen Elemente geladen. So ist eine mehrstufige Navigation mit mehreren Oberkategorien und Untergruppen möglich.

Als einfaches Beispiel nehmen wir die folgenden Kategorien samt Unterpunkten:

>

Browserhersteller deutsch

 

   

>

Microsoft: http://www.microsoft.de/

 

   

>

Firefox: http://www.firefox-browser.de/

 

>

Browserhersteller englisch

 

   

>

Microsoft: http://www.microsoft.com/

 

   

>

Mozilla: http://www.mozilla.com/

 

   

>

Opera: http://www.opera.com/

Bei der Datenstruktur ist es leider nicht mehr möglich, alles nur mit value-Attributen zu machen. Stattdessen werden die einzelnen zu ladenden Seiten sowie die entsprechenden Beschriftungen der Auswahllistenelemente in Arrays gespeichert:

var texte = new Array(
   new Array("---Bitte auswählen---",
             "",
             ""),
   new Array("---Bitte auswählen---",
             "Microsoft (deutsch)",
             "Firefox (deutsch)"),
   new Array("---Bitte auswählen---",
             "Microsoft (englisch)",
             "Mozilla (englisch)",
             "Opera (englisch)")
);
var urls = new Array(
   new Array(""),
   new Array("",
             "http://www.microsoft.de/",
             "http://www.firefox-browser.de/"),
   new Array("",
             "http://www.microsoft.com/",
             "http://www.mozilla.com/",
             "http://www.opera.com/")
);

Natürlich können Sie auch die aus Kapitel 18 bekannte JSON-Notation für das Array urls verwenden; das spart ein wenig Tipparbeit.

Werfen wir nun einen Blick auf das HTML-Formular mit den beiden Auswahllisten:

<select name="ober" onchange="zeige(this);">
   <option>---Bitte auswählen---</option>
   <option>Browserhersteller deutsch</option>
   <option>Browserhersteller englisch</option>
</select>
<select name="unter" onchange="navigation_laden(this);">
   <option value="">---Bitte auswählen---</option>
   <option value=""></option>
   <option value=""></option>
</select>

Um das Skript zu vollenden, müssen noch die zweiten Aufgaben mit JavaScript erledigt werden:

>

Die Auswahlliste löschen:

auswahllistenreferenz.length = 0;

>

Die Auswahlliste neu füllen:

for (var i=0; i<urls[kategorienr].length; i++) {
   auswahllistenreferenz.options[i] =
      new Option(texte[kategorienr][i],
                 urls[kategorienr][i]);
}

Der zweite Parameter des Konstruktors für das Option-Objekt ist die gewünschte value-Eigenschaft; damit ist es möglich, in der zweiten Auswahlliste direkt die Funktion navigation_laden() aufzurufen.

>

Das erste Element der Auswahlliste auswählen:

auswahllistenreferenz.selectedIndex = 0;

Fassen wir zusammen: Folgendes Skript bietet Ihnen eine mehrstufige Navigation mit Auswahllisten:

<html>
<head>
<title>Navigation</title>
<script type="text/javascript" src="navigation.js"></script>

<script type="text/javascript"><!--
var texte = new Array(
   new Array("---Bitte auswählen---",
             "",
             ""),
   new Array("---Bitte auswählen---",
             "Microsoft (deutsch)",
             "Firefox (deutsch)"),
   new Array("---Bitte auswählen---",
             "Microsoft (englisch)",
             "Mozilla (englisch)",
             "Opera (englisch)")
);
var urls = new Array(
   new Array(""),
   new Array("",
             "http://www.microsoft.de/",
             "http://www.netscape.de/"),
   new Array("",
             "http://www.microsoft.com/",
             "http://home.netscape.com/",
             "http://www.opera.com/")
);
function zeige(auswahl) {

   var kategorienr = auswahl.selectedIndex;
   auswahl.form.elements["unter"].length = 0;
   for (var i=0; i<urls[kategorienr].length; i++) {
      auswahl.form.elements["unter"].options[i] =
         new Option(texte[kategorienr][i],
                    urls[kategorienr][i]);
   }
   auswahl.form.elements["unter"].selectedIndex = 0;
}
//--></script>
</head>
<body>
<h1>Navigation</h1>
<form onsubmit="return false;">
<select name="ober" onchange="zeige(this);">
   <option>---Bitte auswählen---</option>
   <option>Browserhersteller deutsch</option>
   <option>Browserhersteller englisch</option>
</select>
<select name="unter" onchange="navigation_laden(this);">
   <option value="">---Bitte auswählen---</option>
   <option value=""></option>
   <option value=""></option>
</select>
</form>
</body>
</html>

 

Bilder

Abbildung 31.2    
Mehrstufige Navigation

Im folgenden Listing sehen Sie wieder die Alternative mit der Schaltfläche, die das Laden der neuen URL auslöst:

<html>
<head>
<title>Navigation</title>
<script type="text/javascript" src="navigation.js"></script>
<script type="text/javascript"><!--
var texte = new Array(
   new Array("---Bitte auswählen---",
             "",
             ""),
   new Array("---Bitte auswählen---",
             "Microsoft (deutsch)",
             "Firefox (deutsch)"),
   new Array("---Bitte auswählen---",
             "Microsoft (englisch)",
             "Mozilla (englisch)",
             "Opera (englisch)")
);
var urls = new Array(
   new Array(""),
   new Array("",
             "http://www.microsoft.de/",
             "http://www.firefox-browser.de/"),
   new Array("",
             "http://www.microsoft.com/",
             "http://www.mozilla.com/",
             "http://www.opera.com/")
);
function zeige(auswahl) {
   var kategorienr = auswahl.selectedIndex;
   auswahl.form.elements["unter"].length = 0;
   for (var i=0; i<urls[kategorienr].length; i++) {
      auswahl.form.elements["unter"].options[i] =
         new Option(texte[kategorienr][i],
                    urls[kategorienr][i]);
   }
   auswahl.form.elements["unter"].selectedIndex = 0;
}
//--></script>
</head>
<body>
<h1>Navigation</h1>
<form onsubmit="return false;">
<select name="ober" onchange="zeige(this);">
  <option>---Bitte auswählen---</option>
  <option>Browserhersteller deutsch</option>
  <option>Browserhersteller englisch</option>
</select>
<select name="unter">

   <option value="">---Bitte auswählen---</option>
   <option value=""></option>
   <option value=""></option>
</select>
<input type="button" value="Go!"
   onclick="navigation_laden(this.form.elements['unter']);" />
</form>
</body>
</html>

31.2 Navigation mit DHTML

Auch wenn DHTML eigentlich nichts weiter als ein hässliches Kunstwort ist, haben Sie mit dieser Technik auch in Sachen Navigation erweiterte Möglichkeiten.

Im World Wide Web gibt es eine Reihe von DHTML-Skripten, die teilweise unglaublich ausgefeilt sind. Dennoch wollen wir es uns nicht nehmen lassen, hier einen eigenen Ansatz vorzustellen.

Es ist klar, dass unser eigener Ansatz sich nicht mit den Top-Skripten aus dem Web messen kann, das ist auch gar nicht unsere Absicht. Eines der Hauptziele dieses Buches ist es ja, dass Sie Werkzeuge für Ihre Arbeit erhalten und dabei auch noch etwas lernen. Und allein schon die technischen Hintergründe, wie so eine DHTML-Navigation technisch realisiert werden kann, sind sehr lehrreich. Betrachten Sie also die folgenden Skripten nicht als Nonplusultra, sondern als voll funktionsfähigen Ansatz, den Sie einsetzen oder auch entsprechend erweitern können.


31.2.1 Baumstrukturen

Benutzer des Windows Explorer (Start N Ausführen N Explorer) oder ähnlicher grafischer Dateibrowser kennen die Baumansicht ihres Produkts: Sie sehen zunächst nur eine Liste der Laufwerke. Auf Klick öffnen sich die einzelnen Unterordner. Ersetzen Sie »Laufwerke« durch »Kategorien« und »Unterordner« durch »Unterpunkte«, und Sie haben das Beispiel aus dem vorangegangenen Abschnitt.

Mit JavaScript und DHTML lässt sich das relativ einfach nachbilden. Der Vorteil: Wenn anfangs nur die Oberkategorien angezeigt werden, ist die Anzeige sehr platzsparend.

Die folgende Lösung geht davon aus, dass sich die Navigation in einem Frame befindet und die Inhaltsseiten in einem anderen Frame namens »Inhalt« angezeigt werden sollen. Ein mögliches Frameset sieht dann folgendermaßen aus:

<html> <head> <title>Navigation</title> <frameset cols="150,*"> <frame src="navigationsframe.html" /> <frame src="" name="Inhalt" /> </frameset> </html>

Die Datei navigationsframe.html enthält zunächst die Ober- und (ein wenig eingerückt) die Unterpunkte. Die einzelnen Oberpunkte sind in <div>-Elemente eingeschlossen, ebenfalls die jeweiligen Gruppen aus Unterpunkten. So ist es möglich, die einzelnen Elemente nach Bedarf ein- und auszublenden.

Nach einem Mausklick auf die Oberpunkte muss eine Funktion aufgerufen werden, die den entsprechenden Unterpunkt sichtbar oder unsichtbar macht.

<div id="ober1" style="position: absolute;"> <a href="#" onclick="toggle(1); return false;">Browserhersteller deutsch</a> </div> <div id="unter1" style="position: absolute;"> &nbsp;&nbsp; <small> <a href="http://www.microsoft.de/" target="Inhalt">Microsoft</a><br /> </small> &nbsp;&nbsp; <small> <a href="http://www.firefox-browser.de/" target="Inhalt">Firefox</a><br> </small> </div> <div id="ober2" style="position: absolute;"> <a href="#" onclick="toggle(2); return false;">Browserhersteller englisch</a> </div> <div id="unter2" style="position: absolute;"> &nbsp;&nbsp; <small> <a href="http://www.microsoft.com/" target="Inhalt">Microsoft</a><br /> </small> &nbsp;&nbsp; <small> <a href="http://www.mozilla.com/" target="Inhalt">Netscape</a><br /> </small> &nbsp;&nbsp; <small> <a href="http://www.opera.com/" target="Inhalt">Opera</a><br /> </small> </div>

Beachten Sie die halbfett hervorgehobenen Elemente in diesem HTML-Code:

>

Die <div>-Elemente der Oberkategorien tragen den Namen oberX, wobei X für die laufende Nummer steht (1, 2, ...).

 

>

Die <div>-Elemente der Unterpunkte tragen den Namen unterX, wobei X für die laufende Nummer der zugehörigen Oberkategorie steht.

 

>

Bei einem Klick auf einen Kategorienamen wird die Funktion toggle() aufgerufen und als Parameter die Nummer der entsprechenden Kategorie übergeben. In der Funktion toggle() muss dann die Sichtbarkeit des Menüs gesetzt werden – entweder auf sichtbar oder auf unsichtbar.

function toggle(nr) {
   var stil = document.getElementById("unter"+nr).style;
   var v = stil.visibility;
   if (v == "hidden" || v == "hide") {
      stil.visibility = "visible";
   } else {
      stil.visibility = "hidden";
   }
   ausgeben();
}

Die Funktion ausgeben() zeichnet die Menüpunkte neu.

>

Alle HTML-Links werden im Frame "Inhalt" geöffnet.

Kommen wir zur Funktion ausgeben(). Der Status quo ist folgender:

>

Alle Oberpunkte sind sichtbar und müssen angezeigt werden.

 

>

Nicht alle Unterpunkte sind sichtbar.

 

>

Die Anordnung der einzelnen Elemente ist nicht korrekt.

In der Funktion ausgeben() müssen die einzelnen Elemente korrekt untereinander angeordnet werden. Die horizontale Position ist immer gleich, denn wir haben ja alle Unterpunkte durch &nbsp;&nbsp; ein wenig eingerückt. Lediglich die vertikale Position muss bestimmt werden.

Der folgende Algorithmus weist allen <div>-Elementen ihre korrekte Position zu:

>

Der erste Oberpunkt wird ausgegeben.

 

>

Die Höhe des ersten Oberpunktes wird ermittelt (mit parseInt(document.getElementById("unter"+nr).style.height)). Sie gibt an, um wie viel tiefer der nächste Punkt ausgegeben werden muss.

 

>

Wenn die ersten Unterpunkte sichtbar sind, werden diese ausgegeben, und ihre Höhe wird noch zu der Höhe des ersten Oberpunktes hinzuaddiert, um die Position für die nächsten Punkte zu ermitteln.

 

>

Wenn die ersten Unterpunkte nicht sichtbar sind, werden die zweiten Oberpunkte an die korrekte Stelle verschoben und wird deren Höhe hinzuaddiert.

 

>

Das Ganze wird für alle Ober- und Unterpunkte so ausgeführt, bis alle Elemente korrekt platziert worden sind.

Zum Start verwenden wir die folgenden Konstanten:

>

Alle Punkte sind um zehn Pixel eingerückt.

 

>

Der Abstand des obersten Punkts zum Start der Seite beträgt 50 Pixel.

Die Funktion ausgeben() ist dann recht schnell erstellt (unter Zuhilfenahme der Hilfsfunktion dhtml_moveTo()):

function dhtml_moveTo(id, x, y) { var stil = document.getElementById(id).style; if (document.all) { stil.posLeft = y + "px"; stil.posTop = y + "px"; } else { stil.left = x + "px"; stil.top = y + "px"; } } function ausgeben() { var y = 50; // Startwert var nr = 1; while (document.getElementById("ober" + nr)) { var oberstil = document.getElementById("ober"+nr).style; var unterstil = document.getElementById("unter"+nr).style; dhtml_moveTo("ober" + nr, 10, y); // Oberpunkt y += parseInt(oberstil.height); if (unterstil.visibility == "visible"|| unterstil.visibility == "show") { dhtml_moveTo("unter" + nr, 10, y); // Unterpunkt y += parseInt(unterstil.height); } nr ++; } }

Nachfolgend finden Sie noch einmal den kompletten Code mit allen HTML-Elementen und JavaScript-Funktionen. Beachten Sie, wie wieder einmal dank der Ausgliederung von Kernfunktionalitäten recht mächtiger Code in recht wenigen Zeilen erstellt werden konnte.

<html> <head> <title>Navigation</title> <script type="text/javascript"><!-- function dhtml_moveTo(id, x, y) { var stil = document.getElementById(id).style; if (document.all) { stil.posLeft = y + "px"; stil.posTop = y + "px"; } else { stil.left = x + "px"; stil.top = y + "px"; } } function toggle(nr) { var stil = document.getElementById("unter"+nr).style; var v = stil.visibility; if (v == "hidden" || v == "hide") { stil.visibility = "visible"; } else { stil.visibility = "hidden"; } ausgeben(); } function ausgeben() { var y = 50; // Startwert var nr = 1; while (document.getElementById("ober" + nr)) { var oberstil = document.getElementById("ober"+nr).style; var unterstil = document.getElementById("unter"+nr).style; dhtml_moveTo("ober" + nr, 10, y); // Oberpunkt y += parseInt(oberstil.height); if (unterstil.visibility == "visible"|| unterstil.visibility == "show") { dhtml_moveTo("unter" + nr, 10, y); // Unterpunkt y += parseInt(unterstil.height); } nr ++; } } function init() { var nr = 1; while (document.getElementById("unter" + nr)) { document.getElementById("unter" + nr).stil.visibility = "hidden"; nr ++; } ausgeben(); } //--></script> </head> <body onload="init();"> <div id="ober1" style="position: absolute;"> <a href="#" onClick="toggle(1); return false;">Browserher- steller deutsch</a> </div> <div id="unter1" style="position: absolute;"> &nbsp;&nbsp; <small> <a href="http://www.microsoft.de/" target="Inhalt">Microsoft</a><br /> </small> &nbsp;&nbsp; <small> <a href="http://www.firefox-browser.de/" target="Inhalt">Firefox</a><br /> </small> </div> <div id="ober2" style="position: absolute;"> <a href="#" onClick="toggle(2); return false;">Browserher- steller englisch</a> </div> <div id="unter2" style="position: absolute;"> &nbsp;&nbsp; <small> <a href="http://www.microsoft.com/" target="Inhalt">Microsoft</a><br /> </small> &nbsp;&nbsp; <small> <a href="http://www.mozilla.com/" target="Inhalt">Mozilla</a><br /> </small> &nbsp;&nbsp; <small> <a href="http://www.opera.com/" target="Inhalt">Opera</a><br /> </small> </div> </body> </html>

 

Bilder

Abbildung 31.3     Links die DHTML-Navigation, rechts die geladene Webseite

Beachten Sie, dass nach dem vollständigen Laden der HTML-Seite die folgenden zwei Dinge geschehen:

>

Alle Unterpunkte werden unsichtbar gemacht.

 

>

Die Funktion ausgeben() wird aufgerufen, um die Elemente erstmalig zu positionieren. Damit ersparen wir uns die Positionierungsangaben über style="..." oder <style>...</style>.

31.3 Alternativen im Web

Im World Wide Web gibt es wie angekündigt mehrere unterschiedliche Ansätze zum Thema Navigation mit JavaScript/DHTML. Zum Abschluss dieses Kapitels sollen zwei Vertreter dieses Bereichs gebührende Erwähnung finden. Diese zeichnen sich dadurch aus, dass sie ständig weiterentwickelt werden. Damit ist zu hoffen, dass diese Skripten auch beim Erscheinen neuer Browserversionen stets aktuell und verwendbar bleiben.


31.3.1 Joust


Unter http://www.ivanpeters.com/index.htm?page=/joust/ (wenn das nicht funktioniert, gehen Sie über die Homepage http://www.ivan-peters.com/) finden Sie Joust, ein System, mit dem eine Menüstruktur, die dem Windows Explorer (oder Derivaten) ähnelt, leicht mit JavaScript abgebildet werden kann. Die Software kann gratis heruntergeladen und eingesetzt werden (lesen Sie aber die Lizenzbedingung).

Um das Skript an Ihre eigenen Bedürfnisse anzupassen, müssen Sie lediglich Ihre Menüstruktur in JavaScript-Code fassen. Jedes Menüelement in Joust hat eine eigene, numerische ID. Bei jedem Element können Sie zudem angeben, welches Element sein Vaterelement ist. So ist eine eindeutige Abbildung der Struktur möglich, und auch Verschachtelungen können mit Joust realisiert werden.

var e = theMenu.addEntry(-1, "Folder", "Browserhersteller englisch", "englisch.html", null); theMenu.addChild(e, "Document", "Microsoft englisch", "http://www.microsoft.com/", null); theMenu.addChild(e, "Document", "Mozilla englisch", "http://www.mozilla.com/", null); theMenu.addChild(e, "Document", "Opera englisch", "http://www.opera.com/", null); var d = theMenu.addEntry(-1, "Folder", "Browserhersteller deutsch", "deutsch.html", null); theMenu.addChild(d, "Document", "Microsoft deutsch", "http://www.microsoft.de/", null); theMenu.addChild(d, "Document", "Firefox deutsch", "http://www.firefox-browser.de/", null);

In der Variablen theMenu steht (zumindest im Standardcode) eine Referenz auf das Menüobjekt. Mit der Methode addEntry() fügen Sie dem Menü einen neuen Punkt auf oberster Ebene hinzu. Der Rückgabewert der Funktion ist der Identifikator des Menüeintrags.

Die Methode addChild() dagegen fügt nicht einen Oberpunkt, sondern einen Unterpunkt hinzu. Deswegen muss als erstes Argument an die Funktion eine Referenz auf das Parent-Objektübergeben werden, in unserem Beispiel also entweder e für den Oberbegriff »Browserhersteller englisch« oder d für »Browserhersteller deutsch«.


Bilder

Abbildung 31.4     Auch die Joust-Seite verwendet das Joust-Menü (links).


 

31.3.2 Weitere Ansätze

Eine einfache Suche bei jeder Suchmaschine fördert eine unübersichtliche Zahl von DHTML-Menüs zu Tage. Eine spezielle Empfehlung wird an dieser Stelle nicht ausgesprochen, denn ein solches Menü lebt davon, dass es regelmäßig gepflegt und aktualisiert wird, damit möglichst viele (moderne) Browser unterstützt werden. Achten Sie also nicht nur darauf, wie gut das Menü in Ihrem Browser funktioniert, sondern auch darauf, wie das in anderen Browsern aussieht. Auch der Veröffentlichungszyklus des Menüs ist wichtig. Das im vorherigen Abschnitt vorgestellte Joust beispielsweise ist ein Web-Klassiker, hat allerdings seine besten Zeiten eigentlich schon hinter sich. Der Code ist aber so gut geschrieben, dass er immer noch recht gut funktioniert.

Ebenfalls interessant ist es, einen Blick auf die jeweilige serverseitige Technologie zu werfen; manche bieten ebenfalls ein clientseitiges DHTML-Menü an – das serverseitig mit Daten gefüttert wird. Hier zur Illustration das Menü von ASP.NET 2.0. Sie benötigen zunächst eine XML-Datei (Web.sitemap) mit einer Beschreibung der einzelnen Navigationspunkte:

<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="Default.aspx" title="Homepage" description="Homepage der Anwendung"> <siteMapNode url="Produkte.aspx" title="Produkte" description="Unsere Produkte" /> <siteMapNode url="Kontakt.aspx" title="Kontakt" description="Impressum und Kontaktformular" /> </siteMapNode> </siteMap>

Diese Sitemap wird von einem speziellen serverseitigen Steuerelement von ASP.NET 2.0 interpretiert und erstellt daraus ein schönes JavaScript-Menü – weitgehend browserunabhängig. Die Arbeitsersparnis ist natürlich enorm.

<%@ Page Language="JScript" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>JavaScript-Menü</title> </head> <body> <form runat="server"> <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"> </asp:Menu> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> </form> </body> </html>

 

Bilder

Abbildung 31.5     Ein DHTML-Menü mit wenigen Zeilen Markup

 


Der Anglizismus bleibt hier bestehen. In der deutschsprachigen Literatur wird »parent object« meist mit »Vaterobjekt« übersetzt, das englische Wort »parent« ist jedoch geschlechtsneutral und bedeutet »Elternteil«.

 

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.01.2018 - 15:21

Danke für das Tutorial.

Portrait von MaoMao
  • 09.01.2013 - 16:53

Gute Tutorial leicht erklärt.

x
×
×