Dynamische Liste
Eine dynamische List ist mit JavaScript schnell realisiert. Eine solche List besteht aus einem oder mehreren Listenelementen. Ein Listenelement setzt sich zusammen aus einem Head und einem Body. Der Kopf ist die Überschrift für den Körper. Bei Klick auf den Kopf soll der Körper ausgeklappt werden, bei erneutem Klick soll der Körper wieder eingeklappt werden.
Die Positionierung der Listenelement können wir der Engine des Browsers überlassen. HTML Elemente lassen sich mit dem CSS Attribut display und den Werten block oder none anzeigen oder verstecken.
Das HTML Grundgerüst
Als erster Schritt muss das HTML Grundgerüst erstellt werden. Dazu eignen sich eine Reihe von DIV Containern, jeweils einen für den Kopf und einen für den Körper. Als Körper dient eine normale HTML Liste. Der Startwert für die Eingenschaft display der Körper soll none sein. Jedes Listenelement besteht nur aus 2 DIV Containern. Um sie später mit JavaScript ansprechen zu können bekommen die Körper noch eine eindeutige ID nach dem Muster "body"+Nummer.
<html>
<head>
<style type="text/css">
div.head { cursor:pointer; }
div.body { display:none; }
</style>
</head>
<body>
<div class="head">Heading 1</div>
<div id="body1" class="body">
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
<div class="head">Heading 2</div>
<div id="body2" class="body">
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
JavaScript
Um die Liste zu animieren fehlt noch die Funktion einen Körper ein- und auszublenden. Das soll über Klick auf den entsprechenden Köper geschehen. Dafür muss nichts weiter getan werden als den Wert der display Eingenschaft auszutauschen.
...
</style>
<script type="text/javascript">
function switchDisplay(id)
{
var list=document.getElementById("body"+id);
if(list.style.display=="block") list.style.display="none";
else list.style.display="block";
}
</script>
</head>
<body>
...
Welcher Body mit welcher ID umgeschalten werden soll bestimmt der Wert des Parameters "id". Dazu wird die Funktion im Kopf des Listenelements mit der Nummer als Parameter aufgerufen. Fertig ist die dynamische Liste.
<html>
<head>
<style type="text/css">
div.head { cursor:pointer; }
div.body { display:none; }
</style>
<script type="text/javascript">
function switchDisplay(id)
{
var list=document.getElementById("body"+id);
if(list.style.display=="block") list.style.display="none";
else list.style.display="block";
}
</script>
</head>
<body>
<div class="head" onClick="switchDisplay('1');">Heading 1</div>
<div id="body1" class="body">
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
<div class="head" onClick="switchDisplay('2');">Heading 2</div>
<div id="body2" class="body">
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
Beispiel
Hier das Beispiel aus dem Workshop: Beispiel
Zurück
This work is licensed under a Creative Commons Attribution-ShareAlike 2.0 Austria License.