## 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

© 2001 selfhtml@teamone.de