Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 31 Navigation
  gp 31.1 Navigation mit Pulldown-Menüs
  gp 31.2 Navigation mit DHTML
    gp 31.2.1 Baumstrukturen
  gp 31.3 Alternativen im Web
    gp 31.3.1 Joust
    gp 31.3.2 Weitere Ansätze

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:

gp  Navigation mit Pulldown-Menüs (eine einfache und eine komplexe Variante)
gp  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).


Rheinwerk Computing

31.1 Navigation mit Pulldown-Menüs  toptop

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:

gp  Um eine neue Seite in ein neues Fenster zu laden, müssen Sie die Eigenschaft location.href des entsprechenden Fensters oder Frames setzen.
gp  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>
gp  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).
gp  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:

gp  Der erste Parameter ist die Referenz auf die Auswahlliste.
gp  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:

gp  wenn das value-Attribut leer ist
gp  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>

Abbildung
Hier klicken, um das Bild zu Vergrößern

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:

gp  Browserhersteller deutsch
    gp  Microsoft: http://www.microsoft.de/
    gp  Firefox: http://www.firefox-browser.de/
gp  Browserhersteller englisch
    gp  Microsoft: http://www.microsoft.com/
    gp  Mozilla: http://www.mozilla.com/
    gp  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:

gp  Die Auswahlliste löschen:
auswahllistenreferenz.length = 0;
gp  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.
gp  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>

Abbildung
Hier klicken, um das Bild zu Vergrößern

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>
 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript






 JavaScript


Zum Katalog: jQuery






 jQuery


Zum Katalog: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Katalog: Responsive Webdesign






 Responsive Webdesign


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Rheinwerk Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de