SELFHTML: JavaScript / Anwendungsbeispiele / Verweisliste als Auswahlliste

SELFHTML/Navigationshilfen

JavaScript/DOM

Anwendungsbeispiele

Verweisliste als Auswahlliste

Hinweise zu diesem Beispiel
Quelltext mit Erläuterungen

Anzeigebeispiel: So sieht's aus

Hinweise zu diesem Beispiel

In diesem Beispiel wird beschrieben, wie Sie eine Auswahlliste eines HTML-Formulars als praktische Alternative für lange Listen für Verweise benutzen können. Auf diesem Prinzip basiert etwa auch die SELFHTML Quickbar. Die Auswahlliste wird dabei in Form einer kleinen Aufklappliste realisiert, die in einem eigenen schmalen Frame-Fenster platziert ist. Das nimmt kaum Platz in Anspruch, und trotzdem steht dem Anwender in jeder Situation eine Liste mit Verweisen zur Verügung.

Quelltext mit Erläuterungen

Das Beispiel zeigt die die HTML-Datei, die das Frameset definiert, und die Datei, die im oberen, schmalen Framefenster angezeigt wird. In dieser Datei ist die Auswahlliste und das JavaScript zum Steuern der Auswahlliste enthalten.

Beispiel - Datei mit dem Frameset:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Verweisliste als Auswahlliste</title>
</head>
<frameset rows="40,*" border="0" frameborder="0" framespacing="0">
 <frame src="verweisliste2.htm" name="oben" marginheight="3" marginwidth="10">
 <frame src="../verweisliste.htm" name="unten">
</frameset>
</html>

Beispiel - Datei `verweisliste2.htm`:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function Go(x) {
 if(x == "nothing") {
   document.forms[0].reset();
   document.forms[0].elements[0].blur();
   return;
 }
 else if(x == "end")
   top.location.href = parent.frames[1].location;
 else {
   parent.frames[1].location.href = x;
   document.forms[0].reset();
   document.forms[0].elements[0].blur();
 }
}
//-->
</script>
</head>
<body bgcolor="#EEEEEE">
<form action=""><select size=1 name="Auswahl"
  onChange="Go(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)"
  style="width:250px; background-color:#FFFFE0; font-size:9pt; font-family:Arial,sans-serif;"
  width="250">
<option value="nothing">[ bitte auswählen! ]</option>
<option value="nothing">------------------------</option>
<option value="../verweisliste.htm">Verweisliste als Auswahlliste</option>
<option value="nothing">------------------------</option>
<option value="../../../editorial/index.htm">Editorial</option>
<option value="../../../intro/index.htm">Einführung</option>
<option value="../../../html/index.htm">HTML</option>
<option value="../../../css/index.htm">CSS Style-Sheets</option>
<option value="../../../xml/index.htm">XML/DTDs</option>
<option value="../../../javascript/index.htm">JavaScript/DOM</option>
<option value="../../../dhtml/index.htm">Dynamisches HTML</option>
<option value="../../../cgiperl/index.htm">CGI/Perl</option>
<option value="nothing">------------------------</option>
<option value="end">Beenden
</select></form>
</body>
</html>

Erläuterung:

Frame-Set definieren:

Da die Auswahlliste im Beispiel während der Anzeige der Webseite ständig eingeblendet sein soll, wird ein Frame-Set definiert. Es besteht aus zwei Fenstern, nämlich einem schmalen Streifen im oberen Bereich des Browser-Fensters und einem Hauptfenster für die Anzeige. Das obere Fenster, in dem die Auswahlliste platziert werden soll, ist 40 Pixel hoch, nimmt also nur wenig Platz in Anspruch.
Im oberen Frame-Fenster wird beim Aufruf die Datei verweisliste2.htm angezeigt. Diese Datei wird die Auswahlliste enthalten. Im unteren Fenster wird im Beispiel die Datei ../verweisliste.htm angezeigt. Das könnte beispielsweise die Titelseite Ihres Web-Projekts sein.

Auswahlliste definieren:

In der Datei oben.htm wird innerhalb des Dateikörpers nichts anderes als ein Formular mit einer Auswahlliste definiert.

Die einzelnen Auswahlmöglichkeiten stellen die Verweise dar. Es gibt im Beispiel drei Formen, wie so eine Auswahlmöglichkeit aussieht.
<option value="datei1.htm">Erste Datei
Eine solche Auswahlmöglichkeit definiert Daten, die von JavaScript später als Verweis interpretiert werden. Hinter dem Attribut value= steht das gewünschte Verweisziel. Hinter dem <option>-Tag steht der Verweistext, der in der Auswahlliste erscheinen soll.
<option value="datei1.htm">Erste Datei oder
<option value="nothing">[ Titel ]
Mit solchen Einträgen werden Auswahlmöglichkeiten definiert, die in der Liste erscheinen, aber keine Wirkung haben sollen. Das können in längeren Listen zum Beispiel Trennlinien-Einträge sein. Auch die erste Auswahlmöglichkeit der Liste muss so definiert werden, denn sie stellt die "Listenüberschrift" dar. Bei solchen Einträgen notieren Sie einfach hinter dem Attribut value= den Wert nothing.
<option value="end">Beenden
Mit einem solchen Eintrag, der sinnvollerweise die letzte Auswahlmöglichkeit darstellt, können Sie bewirken, dass die Auswahlliste beendet wird. Notieren Sie dazu hinter dem Attribut value= den Wert end. Wenn Sie kein Beenden der Auswahlliste ermöglichen wollen, lassen Sie einen solchen Eintrag einfach weg.

Entscheidend zum Verarbeiten der Auswahlliste sind die Angaben im einleitenden <select>-Tag. Dort wird der Event-Handler onChange= notiert, der das Ausführen von JavaScript-Code ausführt, sobald der Anwender einen neuen Eintrag in der Auswahlliste ausgewählt. Wenn dieses Ereignis eintritt, wird im Beispiel die Funktion Go() aufgerufen. Dazu wird der Wert (value) des ausgewählten Listeneintrags als Parameter übergeben. Es handelt sich um den Wert, der entweder ein Verweisziel oder eines der vereinbarten Schlüsselwörter nothing oder end ist.

Auswahl verarbeiten:

Im Dateikopf steht die Funktion Go(), die den ausgewählten Eintrag als Parameter übergeben bekommt und verarbeitet. Die Funktion unterscheidet die drei Fälle nothing, end oder Verweisziel und führt abhängig davon entsprechende Anweisungen aus.

Wenn ein Eintrag mit dem Wert nothing ausgewählt wurde, wird die Auswahlliste zurückgesetzt (reset()). Der erste Eintrag, also der Überschrifteneintrag der Liste, wird wieder angezeigt. Der Auswahlbalken wird aus der Liste bis zur nächsten Auswahl entfernt (blur()).

Lautet der Eintrag end, wird einfach das aktuelle Frame-Fenster, also das mit der Auswahlliste, beendet. Dazu wird der Inhalt des Hauptframefensters zum Inhalt des gesamten Browserfensters gemacht (top.location.href = parent.frames[1].location).

In allen anderen Fällen wird der übergebene Wert als Verweis interpretiert. Mit der Zuweisung des übergebenen Werts an parent.frames[1].location.href wird ein Verweis ausgeführt, der das ausgewählte Verweisziel im Hauptframefenster anzeigt. Auch in diesem Fall wird die Auswahlliste zurückgesetzt (reset()). Der erste Eintrag, also der Überschrifteneintrag der Liste, wird wieder angezeigt. Der Auswahlbalken wird aus der Liste bis zur nächsten Auswahl entfernt (blur()).

Beachten Sie:

Im HTML-Standard ist die Verwendung des Attributes width= für das <select>-Tag nicht erlaubt. Netscape 4.x interpretiert jedoch keine CSS-Eigenschaften für dieses HTML-Element, akzeptiert dagegen das Attribut width= zur Bestimmung der Breite.

Im HTML-Standard ist auch die Verwendung der Attribute border=, frameborder= und framespacing= für das <frameset>-Tag nicht erlaubt. Da die Browser jedoch den Standard nicht vollständig interpretieren, wurden diese Attribute im Interesse des Layouts im obigen Beispiel trotzdem verwendet.


	Fehlerbehandlung mit dem Eventhandler onError
	Aufenthaltsdauer auf Web-Seite anzeigen