SELFHTML: JavaScript / Anwendungsbeispiele / Verweisliste als Auswahlliste

SELFHTML/Quickbar JavaScript Anwendungsbeispiele

	Verweisliste als Auswahlliste
	Verweisliste als Auswahlliste - das Beispiel

Verweisliste als Auswahlliste - das Beispiel

Anzeigebeispiel: So sieht's aus

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 plaziert ist. Das nimmt kaum Platz in Anspruch, und trotzdem steht dem Anwender in jeder Situation eine Liste mit Verweisen zur Verügung.

Hinweis: Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. 1*. Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

Beispiel Teil 1 - Frame-Set-Datei:

 <html>
 <head>
 <title>Seitentitel</title>
 </head>
 1* <frameset rows="40,*" border=0 frameborder=0 framespacing=0>
  <frame src="oben.htm" marginheight=3 marginwidth=10>
  <frame src="unten.htm">
 </frameset>
 </html>

Beispiel Teil 2 - Datei oben.htm:

 <html>
 <head>
 <title>Seitentitel</title>
 3* <script language="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>
 2* <form>
 <select size=1 name="Auswahl" onChange=
 "Go(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)"
 style="width:350px; background-color:#FFFFE0;
 font-size:9pt; font-family:Arial,sans-serif;" width=350>
 <option value="nothing">[ Titel ]
 <option value="nothing">------------------------
 <option value="unten.htm">Titel-Datei
 <option value="nothing">------------------------
 <option value="datei1.htm">Erste Datei
 <option value="datei2.htm">Zweite Datei
 <option value="datei3.htm">Dritte Datei
 <option value="nothing">------------------------
 <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 plaziert werden soll, ist 40 Pixel hoch, nimmt also nur wenig Platz in Anspruch.
Im oberen Frame-Fenster wird beim Aufruf die Datei oben.htm angezeigt. Diese Datei wird die Auswahlliste enthalten. Im unteren Fenster wird die Datei unten.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 muß 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, daß 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()).


weiter:	Allgemeines zu Dynamischem HTML
zurück:	Aufenthaltsdauer auf Web-Seite anzeigen

SELFHTML/Quickbar JavaScript Anwendungsbeispiele