HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » DHTML Behaviors » Beispiele

DHTML Behaviors: Beispiele

von Jan Winkler

Hier einige praktische Beispiele für DHTML-Behaviors:

Anzeige

Hover-Effekt  nach oben

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.

Ausklapp-Liste  nach oben

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.

Ticker  nach oben

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.



« zurück weiter »
Bewerten

 

DHTML Behaviors

.Autor:Jan Winkler.
. Bewertung:
DHTML Behaviors: Beispiele HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 754 Beiträge im DHTML Behaviors Forum .

Navigation

html-Datei in Container nachladen von Piwi
blättern navigation - nicht alle seitenzahlen zeigen von Powell
XML-Datei per Javascript ver- und entschlüsseln?! von Nupsi
getElementById/innerHTML von duff_beer
Brauche dringend Hilfe/Gallery2.3 von Harburger1887
Window Open von javahack
Musik nach bestimmter Zeit abspielen von InsaYn
Merlin erscheint nicht auf der Website von Moijto
Bräuchte Hilfe von jemanden der sich auskennt ;-) von ladehf
Re: php Style über javascript laden nur wie? von TBT
Bannerwechsel mit mehreren Bannern und per Klick von katha126
HTML Referer ändern von nhs
JavaScript Weiterleitung von xmen
Zeitgesteuertes und zufälliges laden verschiedener index.php von Brainflame
Dynamisch erstellten (mit PHP) Checkboxen mit jQuery/AJAX au von Kyfe

zum DHTML Behaviors Forum »


 
     
 

Anzeige