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 Verfügung.

Quelltext mit Erläuterungen

Das Beispiel zeigt die HTML-Datei, die das Frameset definiert, und die Datei, die im oberen, schmalen Frame-Fenster 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 (select) {
  var wert = select.options[select.options.selectedIndex].value;
  if (wert == "leer") {
    select.form.reset();
    parent.frames["unten"].focus();
    return;
  } else {
    if (wert == "ende") {
      top.location.href = parent.frames[1].location.href;
    } else {
      parent.frames["unten"].location.href = wert;
      select.form.reset();
      parent.frames["unten"].focus();
    }
  }
}
</script>
<style type="text/css">
body { color:#000000; background-color:#EEEEEE; }
select { width:250px; background-color:#FFFFE0; font-size:12px; font-family:Arial,sans-serif; }
</style>
</head>
<body>

<form action="">
<p><select size="1" name="Auswahl" onchange="Go(this)" width="250">
<option value="leer" selected="selected">[ bitte auswählen! ]</option>
<option value="leer">------------------------</option>
<option value="../verweisliste.htm">Verweisliste als Auswahlliste</option>
<option value="leer">------------------------</option>
<option value="../../../editorial/index.htm">Editorial</option>
<option value="../../../intro/index.htm">Einführung</option>
<option value="../../../html/index.htm">HTML/XHTML</option>
<option value="../../../css/index.htm">Stylesheets</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="../../../perl/index.htm">Perl</option>
<option value="leer">------------------------</option>
<option value="ende">Beenden</option>
</select></p>
</form>

</body></html>

Erläuterung:

Frame-Set definieren:

Da die Auswahlliste im Beispiel während der Anzeige der Web-Seite 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 verweisliste2.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</option>
Eine solche Auswahlmöglichkeit definiert Daten, die von JavaScript später als Verweis interpretiert werden. Im Attribut value steht das gewünschte Verweisziel. Im option-Element steht der Verweistext, der in der Auswahlliste erscheinen soll.
<option value="leer">[ Titel ]</option>
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 im Attribut value den Wert leer.
<option value="ende">Beenden</option>
Mit einem solchen Eintrag, der sinnvollerweise die letzte Auswahlmöglichkeit darstellt, können Sie bewirken, dass die Auswahlliste beendet wird. Notieren Sie dazu im Attribut value den Wert ende. 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 auswählt. Wenn dieses Ereignis eintritt, wird im Beispiel die Funktion Go() aufgerufen. Dazu wird mit this das select-Elementobjekt als Parameter übergeben.

Auswahl verarbeiten:

Im Dateikopf steht die Funktion Go(), die das select-Elementobjekt als Parameter übergeben bekommt. In der Funktion kann somit über die Variable select darauf zugegriffen werden. Die Funktion bringt zunächst den Wert des ausgewählten Listeneintrags in Erfahrung, indem Sie über das options-Objekt zunächst den Index der aktuellen Auswahlmöglichkeit ausliest ( selectedIndex) und diese Zahl dazu benutzt, um den Wert derselben ( value) auszulesen. Die Funktion unterscheidet die drei Fälle leer, ende oder Verweisziel und führt abhängig davon entsprechende Anweisungen aus.

Wenn ein Eintrag mit dem Wert leer ausgewählt wurde, wird die Auswahlliste zurückgesetzt (reset()). Der erste Eintrag, also der Überschrifteneintrag der Liste, wird wieder angezeigt. Der Fokus, der auf dem Formularfeld liegt, wird von der Liste bis zur nächsten Auswahl entfernt, indem der untere Frame-Fenster fokussiert wird ( focus()).

Lautet der Eintrag ende, wird einfach das aktuelle Frame-Fenster, also das mit der Auswahlliste, ausgeblendet. Dazu wird der Inhalt des unteren Frame-Fensters zum Inhalt des gesamten Browser-Fensters gemacht (top.location.href = parent.frames["unten"].location.href).

In allen anderen Fällen wird der Wert des ausgewählten Listeneintrags als Verweis interpretiert. Mit der Zuweisung des übergebenen Werts an parent.frames["unten"].location.href wird ein Verweis ausgeführt, der das ausgewählte Verweisziel im Haupt-Frame-Fensters anzeigt. Auch in diesem Fall wird die Auswahlliste zurückgesetzt (reset()). Der erste Eintrag, also der Überschrifteneintrag der Liste, wird wieder angezeigt. Das Haupt-Frame-Fensters bekommt den Fokus und die Auswahlliste wird somit abgewählt.

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 Event-Handler onerror
	Aufenthaltsdauer auf Web-Seite anzeigen

SELFHTML/Navigationshilfen JavaScript/DOM Anwendungsbeispiele

Verweisliste als Auswahlliste