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
## 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 wer den, 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>
Hier klicken, um das Bild zu Vergrößern 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>.
<< 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