1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Anwendungsbeispiele / Verweisliste als Auswahlliste</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie mit Hilfe von JavaScript eine Verweisliste in Gestalt einer Formular-Auswahlliste realisieren knnen.">
<meta name="keywords" content="SELFHTML, JavaScript, Verweise, Verweisliste, Quickbar">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots" content="noindex, nofollow">
<meta name="DC.Publisher" content="SELFHTML e. V.">
<meta name="DC.Date" content="2005-09-05T13:51:07+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/beispiele/verweisliste.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Anwendungsbeispiele" href="index.htm">
<link rel="next" title="Fehlerbehandlung mit dem Event-Handler onerror" href="fehlerbehandlung.htm">
<link rel="prev" title="Aufenthaltsdauer auf Web-Seite anzeigen" href="aufenthaltsdauer.htm">
<link rel="first" title="Zwei Frames gleichzeitig ndern" href="zweiframes.htm">
<link rel="last" title="nderungen der Fenstergre berwachen" href="fensterueberwachen.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Verweisliste als Auswahlliste</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#hinweise">Hinweise zu diesem Beispiel</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#quelltext">Quelltext mit Erluterungen</a><br>
</p>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/verweisliste.htm">Anzeigebeispiel: So sieht's aus</a></p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="hinweise">Hinweise zu diesem Beispiel</a></h2>
<p>In diesem Beispiel wird beschrieben, wie Sie eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../html/formulare/auswahl.htm#listen">Auswahlliste</a> eines HTML-Formulars als praktische Alternative fr lange Listen fr Verweise benutzen knnen. Auf diesem Prinzip basiert etwa auch die <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../navigation/quickbar/index.htm">SELFHTML-Quickbar</a>. 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 Verfgung.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="quelltext">Quelltext mit Erluterungen</a></h2>
<p>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.</p>
<h3 class="xmp">Beispiel - Datei mit dem Frameset:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/verweisliste.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<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>
</pre>
<h3 class="xmp">Beispiel - Datei <var>verweisliste2.htm</var>:</h3>
<pre>
<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 auswhlen! ]</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">Einfhrung</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>
</pre>
<h3 class="xpl">Erluterung:</h3>
<h4>Frame-Set definieren:</h4>
<p>Da die Auswahlliste im Beispiel whrend der Anzeige der Web-Seite stndig eingeblendet sein soll, wird ein Frame-Set definiert. Es besteht aus zwei Fenstern, nmlich einem schmalen Streifen im oberen Bereich des Browser-Fensters und einem Hauptfenster fr die Anzeige. Das obere Fenster, in dem die Auswahlliste platziert werden soll, ist 40 Pixel hoch, nimmt also nur wenig Platz in Anspruch.<br>
Im oberen Frame-Fenster wird beim Aufruf die Datei <code>verweisliste2.htm</code> angezeigt. Diese Datei wird die Auswahlliste enthalten. Im unteren Fenster wird im Beispiel die Datei <code>../verweisliste.htm</code> angezeigt. Das knnte beispielsweise die Titelseite Ihres Web-Projekts sein.</p>
<h4>Auswahlliste definieren:</h4>
<p>In der Datei <var>verweisliste2.htm</var> wird innerhalb des Dateikrpers nichts anderes als ein Formular mit einer Auswahlliste definiert.</p>
<p>Die einzelnen Auswahlmglichkeiten stellen die Verweise dar. Es gibt im Beispiel drei Formen, wie so eine Auswahlmglichkeit aussieht.<br>
<code><option value="datei1.htm">Erste Datei</option></code><br>
Eine solche Auswahlmglichkeit definiert Daten, die von JavaScript spter als Verweis interpretiert werden. Im Attribut <code>value</code> steht das gewnschte Verweisziel. Im <code>option</code>-Element steht der Verweistext, der in der Auswahlliste erscheinen soll.<br>
<code><option value="leer">[ Titel ]</option></code><br>
Mit solchen Eintrgen werden Auswahlmglichkeiten definiert, die in der Liste erscheinen, aber keine Wirkung haben sollen. Das knnen in lngeren Listen zum Beispiel Trennlinien-Eintrge sein. Auch die erste Auswahlmglichkeit der Liste muss so definiert werden, denn sie stellt die "Listenberschrift" dar. Bei solchen Eintrgen notieren Sie einfach im Attribut <code>value</code> den Wert <code>leer</code>.<br>
<code><option value="ende">Beenden</option></code><br>
Mit einem solchen Eintrag, der sinnvollerweise die letzte Auswahlmglichkeit darstellt, knnen Sie bewirken, dass die Auswahlliste beendet wird. Notieren Sie dazu im Attribut <code>value</code> den Wert <code>ende</code>. Wenn Sie kein Beenden der Auswahlliste ermglichen wollen, lassen Sie einen solchen Eintrag einfach weg.</p>
<p>Entscheidend zum Verarbeiten der Auswahlliste sind die Angaben im einleitenden <code><select></code>-Tag. Dort wird der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/eventhandler.htm">Event-Handler</a> <code>onchange</code> notiert, der das Ausfhren von JavaScript-Code ausfhrt, sobald der Anwender einen neuen Eintrag in der Auswahlliste auswhlt. Wenn dieses Ereignis eintritt, wird im Beispiel die Funktion <code>Go()</code> aufgerufen. Dazu wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/objekte.htm#this">this</a> das <code>select</code>-Elementobjekt als Parameter bergeben.</p>
<h4>Auswahl verarbeiten:</h4>
<p>Im Dateikopf steht die Funktion <code>Go()</code>, die das <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/htmlelemente.htm#select">select-Elementobjekt</a> als Parameter bergeben bekommt. In der Funktion kann somit ber die Variable <code>select</code> darauf zugegriffen werden. Die Funktion bringt zunchst den Wert des ausgewhlten Listeneintrags in Erfahrung, indem Sie ber das <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/options.htm">options</a>-Objekt zunchst den Index der aktuellen Auswahlmglichkeit ausliest (<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/options.htm#selected_index">selectedIndex</a>) und diese Zahl dazu benutzt, um den Wert derselben (<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/options.htm#value">value</a>) auszulesen. Die Funktion unterscheidet die drei Flle <code>leer</code>, <code>ende</code> oder Verweisziel und fhrt abhngig davon entsprechende Anweisungen aus.</p>
<p>Wenn ein Eintrag mit dem Wert <code>leer</code> ausgewhlt wurde, wird die Auswahlliste zurckgesetzt (<code>reset()</code>). Der erste Eintrag, also der berschrifteneintrag der Liste, wird wieder angezeigt. Der Fokus, der auf dem Formularfeld liegt, wird von der Liste bis zur nchsten Auswahl entfernt, indem der untere Frame-Fenster fokussiert wird (<img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/window.htm#focus">focus()</a>).</p>
<p>Lautet der Eintrag <code>ende</code>, 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 (<code>top.location.href = parent.frames["unten"].location.href</code>).</p>
<p>In allen anderen Fllen wird der Wert des ausgewhlten Listeneintrags als Verweis interpretiert. Mit der Zuweisung des bergebenen Werts an <code>parent.frames["unten"].location.href</code> wird ein Verweis ausgefhrt, der das ausgewhlte Verweisziel im Haupt-Frame-Fensters anzeigt. Auch in diesem Fall wird die Auswahlliste zurckgesetzt (<code>reset()</code>). Der erste Eintrag, also der berschrifteneintrag der Liste, wird wieder angezeigt. Das Haupt-Frame-Fensters bekommt den Fokus und die Auswahlliste wird somit abgewhlt.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Im HTML-Standard ist die Verwendung des Attributes <code>width</code> fr das <code><select></code>-Tag nicht erlaubt. Netscape 4.x interpretiert jedoch keine CSS-Eigenschaften fr dieses HTML-Element, akzeptiert dagegen das Attribut <code>width</code> zur Bestimmung der Breite.</p>
<p>Im HTML-Standard ist auch die Verwendung der Attribute <code>border</code>, <code>frameborder</code> und <code>framespacing</code> fr das <code><frameset></code>-Tag nicht erlaubt. Da die Browser jedoch den Standard nicht vollstndig interpretieren, wurden diese Attribute im Interesse des Layouts im obigen Beispiel trotzdem verwendet.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="fehlerbehandlung.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="fehlerbehandlung.htm">Fehlerbehandlung mit dem Event-Handler onerror</a>
</td></tr>
<tr>
<td class="doc"><a href="aufenthaltsdauer.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="aufenthaltsdauer.htm">Aufenthaltsdauer auf Web-Seite anzeigen</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
</table>
<p>© 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
