brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

DropDown-Box-Navigation mit JavaScript

von Thomas Salvador.

Eine DropDown-Box-Navigation ist eine, bei der man dem Besucher mehrere Ziele per DropDown-Box zur Auswahl gibt und das Ziel bei Auswahl dann anspringt. Die Navigation zeichnet sich vor allem dadurch aus, dass Sie nur sehr wenig Platz auf der Seite benötigt.

Wir bauen uns in diesem Artikel eine solche Navigation mit Hilfe von HTML und JavaScript.

Dabei benötigen wir HTML, um die DropDown-Box zu setzen, und JavaScript, um die Weiterleitung zum Ziel vorzunehmen.

Formular

Das erste hatten wir im Formulartutorial kennengelernt. DropDown-Boxen sind Auswahlwahlboxen werden durch den <select>-Tag verkapselt.

<form>
  <select>
    ...
  </select>
</form>

Jedes Ziel ist eine <option>, deren Bezeichnung offenbar angezeigt wird und dessen Wert sinnvollerweise gleich der URL des Zieles ist. So ersparen wir uns zusätzliche Felder und ähnliches.

Beispiel:

<form>
  <select>
    <option value="http://www.brauchbar.de/index.html">Bitte wählen
    <option value="http://www.brauchbar.de/index.html">Homepage
    <option value="http://www.brauchbar.de/wd/index.html">Newsletter
    <option value="http://www.brauchbar.de/wd/online/index.html">- Archiv
  </select>
</form>

Das soll hier reichen.

Der <form>-Tag ist so nicht vollständig, da er method und action nicht angibt. Dies können Sie noch machen, um ein standard-gerechtes Formular zu erzeugen, für die reine Funktion benötigen wir es jedoch nicht, wie wir sehen werden.

Funktionalität

Die Funktionalität wird nun mit JavaScript erreicht.

Wir hatten in verschiedenen Scripten den Event-Handler onLoad eingesetzt, der feuert, wenn eine Datei geladen wurde. Hier werden wir den Event-Handler onChange verwenden, der, wie der Name vermuten lässt, feuert, wenn es zu einer Veränderung gekommen ist.

onChange

onChange gibt es für Formularkomponenten, wie Textfelder, Listen und natürlich auch Boxen. Veränderung ist hier in der Form zu verstehen, dass der Wert vor und nach Editierung unterschiedlich ist. Hängt man also ein onChange an ein Textfeld, so feuert er keineswegs während man darin tippt, sondern erst dann, wenn man seine Eingabe/Änderung dort abgeschlossen hat, das Feld wieder verlässt und zuguterletzt der Wert auch noch ungleich dem ursprünglichen ist.

Alle Formularkomponenten sind im Formulartutorial erläutert.

Was heißt das für uns?

Hängen wir an unsere Box ein onChange, so wird dieser erst dann feuern, wenn wir seine Änderung beendet haben, also irgendwas anklicken. Es bleibt anzunehmen, dass nichts geschieht, wenn der man das anklickt, was bereits gewählt war (keine Änderung).

Im Endeffekt ist das also kein großes Problem. Man füge am Anfang der Liste einfach einen Pseudoeintrag ein, wie "Bitte wählen", "wohin?", "springe zu?", usw. Etwas, was selbst keine sinnvolle Antwort ist und ggf. den Besucher auch noch zur Wahl auffordert. Die wenigsten Besucher werden auf die Idee kommen, das anzuklicken und wenn, passiert eben nichts.

<form>
  <select onChange="funktion();">
    ...
  </select>
</form>
Was mit einer Auswahlbox selektiert wurde, fragt man in JavaScript über die Eigenschaft selectedIndex ab.
<form>
  <select onChange="alert('Es wurde Index '+this.selectedIndex+' gewählt');">
    ...
  </select>
</form>

Probieren Sie das bisher Gesagte aus!

Natürlich beginnt die Zählung bei 0.

this bedeutet etwas wie "Das aktuell betrachtete Objekt". In diesem Falle wird das daraus inferiert: Da this innerhalb des onChange verwendet wird und onChange select zugewiesen ist, ist this offenbar select und mit this.selectedIndex der Index des gewählten Boxelementes gemeint. Dies soll hier genügen, wir wollen Details zu einem anderem anderen Zeitpunkt betrachten, um den Artikel nicht zu stark aufzublähen.

Weiterleitung

Der finale Schritt ist nun die Weiterleitung zum Ziel:

Aus einem früheren Script wissen wir, dass man durch eine einfache Zuweisung der Form location.href="URL" den Browser anweist, eben diese Adresse zu laden. Die URLs haben wir in der value-Eigenschaft der Optionen gespeichert, die für JavaScript über ein Feld options erreichbar sind. Der Ziel-URL ergibt sicht also zu:
this.options[this.selectedIndex].value

Dies ergibt sich so:

this ist (hier) die DropDown-Box. this.options sind (alle) ihre Optionen, this.selectedIndex ist der gewählte Index. Folglich ist this.options[this.selectedIndex] die derzeit gewählte Option. Über .value greift man nun noch auf die Eigenschaft value zu, die hier den URL hält.

Wir erhalten also als DropDown-Box-Navigation mit JavaScript:

<form>
  <select onChange="location.href=this.options[this.selectedIndex].value">
    <option value="http://www.brauchbar.de/index.html">Bitte wählen
    <option value="http://www.brauchbar.de/index.html">Homepage
    <option value="http://www.brauchbar.de/wd/index.html">Newsletter
    <option value="http://www.brauchbar.de/wd/online/index.html">- Archiv
  </select>
</form>
Ausprobieren:

Analyse

Vorteil

Sehr effizient, die Weiterleitung geschieht sehr zügig.

Nachteil

Da mit JavaScript realisiert, funktioniert es entsprechend nur bei Besuchern, die JavaScript aktiviert haben.

Schauen Sie sich auch den Artikel "DropDown-Box-Navigation mit CGI" an. Die dort vorgestellte CGI/Perl-Lösung hat diesen Nachteil nicht.


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 23. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/80.html .