Kontakt aufnehmen

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>

Innerhalb des Dokumentes kann die Datei dann wie folgt verwendet werden:

<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>

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>

Ticker

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>

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern