DHTML Behaviors: Beispiele
Hier einige praktische Beispiele für DHTML-Behaviors:Hover-Effekt
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>
<span style="behavior:url(hover.htc)" wert_off="black"> ... Inhalt ... </span>
Ausklapp-Liste
Als ein weiteres Beispiel wollen wir hier eine Ausklapp-Liste erstellen. Dazu wird innerhalb des Dokumentes eine fertige Liste erwartet. außerdem 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>
<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>
Ticker
Als letztes soll nun beispielhaft ein Ticker (~ Lauftext) gebastelt werden. Innerhalb des Dokumentes werden dazu einen eigenen Namespace namensticker 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>
<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>
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf meine Software FeatValue.
Über mich
Ich entwickle Webanwendungen mit viel Leidenschaft. Mein Wissen gebe ich dabei gerne weiter. Mehr über a coding project