Galileo Computing < openbook > Galileo 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
Galileo 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


Galileo Computing

31.2 Navigation mit DHTML  downtop

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.


Galileo Computing

31.2.1 Baumstrukturen  toptop

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:

gp  Die <div>-Elemente der Oberkategorien tragen den Namen oberX, wobei X für die laufende Nummer steht (1, 2, ...).
gp  Die <div>-Elemente der Unterpunkte tragen den Namen unterX, wobei X für die laufende Nummer der zugehörigen Oberkategorie steht.
gp  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.
gp  Alle HTML-Links werden im Frame "Inhalt" geöffnet.

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

gp  Alle Oberpunkte sind sichtbar und müssen angezeigt werden.
gp  Nicht alle Unterpunkte sind sichtbar.
gp  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:

gp  Der erste Oberpunkt wird ausgegeben.
gp  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.
gp  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.
gp  Wenn die ersten Unterpunkte nicht sichtbar sind, werden die zweiten Oberpunkte an die korrekte Stelle verschoben und wird deren Höhe hinzuaddiert.
gp  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:

gp  Alle Punkte sind um zehn Pixel eingerückt.
gp  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>

Abbildung
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:

gp  Alle Unterpunkte werden unsichtbar gemacht.
gp  Die Funktion ausgeben() wird aufgerufen, um die Elemente erstmalig zu positionieren. Damit ersparen wir uns die Positionierungsangaben über style="..." oder <style>...</style>.
 <<   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 und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




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