Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 31 Navigation
|  | 31.1 Navigation mit Pulldown-Menüs
|  | 31.2 Navigation mit DHTML
|  |  | 31.2.1 Baumstrukturen
|  | 31.3 Alternativen im Web
|  |  | 31.3.1 Joust
|  |  | 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:
| 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>
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:
| 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>
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 | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 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.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de