DHTML Behaviors: Beispiele
von Jan Winkler
Hier einige praktische Beispiele für DHTML-Behaviors:
Der einfachste Effekt der mit DHTML Behaviors erzielbar ist, ist der sogenannte Hover-Effekt (veränderte Farbe eines Textes beim überfahren mit der Maus). Um diesen mit DHTML Behaviors umzusetzen wird eine HTC-Datei wie folgt definiert:
<public:component>
<public:property name="wert_on" value="red" id="w_on" />
<public:property name="wert_off" value="blue" id="w_off" />
<public:attach event="onmouseover" onevent="change_on()" />
<public:attach event="onmouseout" onevent="change_off()" />
<script>
function change_on()
{
element.style.color = w_on.value;
}
function change_off()
{
element.style.color = w_off.value;
}
</script>
</public:component>
Innerhalb des Dokumentes kann die Datei dann wie folgt verwendet werden:
<span style="behavior:url(hover.htc)" wert_off="black"> ... Inhalt ... </span>
Beispiel ansehen.
Als ein weiteres Beispiel wollen wir hier eine Ausklapp-Liste erstellen. Dazu wird innerhalb des Dokumentes eine fertige Liste erwartet. Ausserdem wird eine HTC-Datei definiert, die auf alle li-Elemente angewandt wird. Sie beschreibt zwei Dinge: 1. Bei einem Klick, müssen die Kind-Elemente entfernt werden. 2. Bei einem erneuten Klick, müssen die Kind-Elemente wieder angezeigt werden. Das Ganze wird wie folgt umgesetzt:
<public:component>
<public:property name="status" value="open" id="status" />
<public:attach event="onclick" onevent="change_status()" />
<public:method name="actualize" />
<script>
function change_status()
{
if(status.value == 'open'){status.value = 'closed'}
else{status.value = 'open'}
actualize();
}
function actualize()
{
j = element.all.length;
for(i=0;i<j;i++)
{
if(status.value == 'open')
{
element.all(i).style.visibility = 'visible';
element.all(i).style.display = 'block';
}
else
{
element.all(i).style.visibility = 'hidden';
element.all(i).style.display = 'none';
}
}
}
</script>
</public:component>
Die dazugehörige Liste könnte z.B. so aussehen:
<style>
LI {behavior:url(liste.htc);}
</style>
...
<ul>
<li>Eintrag 1
<ul>
<li>Eintrag 1.1</li>
<li>Eintrag 1.2</li>
</ul>
</li>
<li>Eintrag 2
<ul>
<li>Eintrag 2.1</li>
<li>Eintrag 2.2</li>
</ul>
</li>
</ul>
Beispiel ansehen.
Als letztes soll nun beispielhaft ein Ticker (~ Lauftext) gebastelt werden. Innerhalb des Dokumentes werden dazu einen eigenen Namespace namens ticker und das dazugehörige Element text definieren. Als Attribute erhält der Ticker von uns 3 Texte übergeben, die er nacheinander anzeigen soll. Das Dokument:
<html xmlns:ticker>
<head>
<style>
ticker\:text {behavior:url(ticker.htc);}
</style>
</head>
<body onload="ticker.start()">
<ticker:text id="ticker" text1="Dieser Text tickt!"
text2="Text Nummer 2."
text3="... und die letzte Nachricht." >
</ticker:text>
</body>
</html>
Die dazugehörige HTC-Datei könnte z.B. so aussehen:
<public:component>
<public:property name="text1" value="1" id="text1" />
<public:property name="text2" value="2" id="text2" />
<public:property name="text3" value="3" id="text3" />
<public:property name="pause" value=" " id="pause" />
<public:property name="zeit" value="200" id="zeit" />
<public:method name="start" />
<public:method name="stop" />
<public:method name="display" />
<script>
var running = false;
var timer;
var pos = 0;
function start()
{
running = true;
display();
}
function stop()
{
running = false;
}
function display()
{
pos++;
var s = text3.value+pause.value;
s += text2.value+pause.value;
s += text1.value+pause.value;
if(pos > s.length){pos = 0;}
s = s.substr(s.length-pos,s.length);
innerHTML = s;
if(running = true)
{timer = window.setTimeout('ticker.display()',zeit.value);}
}
</script>
</public:component>
Beispiel ansehen.
