 |
| Tipp 2: Schnelle Navigation mit Frames |
|
 Schnelle Navigation mit Auswahllisten mit Frames
| Ein Beispiel (ohne Funktion): |
|
Um eine Auswahlliste für eine direkte Navigation in eine HTML-Seite einzubauen muss lediglich ein kurzes JavaScript erstellt werden und ein Formular-Teil im <body>-Bereich programmiert werden.
Durch die Verwendung des onChange-Events entfällt wie in Tipp 1 das Drücken eines Aktions-Buttons.
Das JavaScript
Diesmal erstellen wir das JavaScript in einer externen Datei namens genmenu.js
// kompatibel zu Browsern NS und IE ab V3.x
function JumpToMenu(targ, selObj, refresh)
{
eval(targ+".location='"+selObj.options
[selObj.selectedIndex].value+"'");
if (refresh) selObj.selectedIndex=0;
}
Und hier der dazugehörige HTML-Code
Wir benötigen zuerst eine Index-Datei zum Definieren des Framesets.
Es werden darin zwei Frames, in Zeilen angeordnet, festgelegt.
Als Namen erhalten diese oben und unten.
Der HTML-Code dazu sieht so aus:
<frameset rows="20%,80%">
<frame src="oben.html" name="oben">
<frame src="unten.html" name="unten">
</frameset>
Im <head>-Bereich muss das externe JavaScript eingebunden werden mit:
<script language="JavaScript" src="genmenu.js"
type="text/javascript"></script>
Im <body>-Bereich wird dann das Formular definiert mit:
<form name="form2">
<select name="menu2"
onChange="JumpToMenu('parent.unten',this,0)" size=1>
<option value="URL1.html" selected>Bitte wählen:
<option value="URL2.html">Home
<option value="URL3.html">News
<option value="URL4.html">Über uns
<option value="URL5.html">Profil
<option value="URL6.html">Produkte
<option value="URL7.html">Service
</select>
</form>
Erklärungen und Variationen
- Die Funktion eval(
ausdruck) wertet den JavaScript-Code aus, der in dem String ausdruck angegeben wird.
- Die Größe der Liste wird mit size=1 im <select>-Tag auf eine sichtbare Zeile reduziert. Die Auswahlliste verhält sich dadurch wie eine übliche Pulldown-Liste.
- Der mit selected gekennzeichnete Eintrag ist vorselektiert.
- Anstelle der URL#n stehen die Links auf die gewünschten unteren Frames.
- Innerhalb der Auswahlliste können mit der Zeile:
<option selected value="0"> Kommentar
beliebige Kommentare eingefügt werden.
Hier ein ausführliches Beispiel zum Download
(Freeware; deutsch)
Entpacken Sie das Archiv in einem Verzeichnis Ihrer Wahl. Start-Dokument ist die "index.html"-Datei.
 JavaScript-Navigator (ZIP-Archiv der Dateien, Größe 6 KB)
|
|
