DIV-Effekte mit Scriptaculous

Um recht einfach Effekte umzusetzen in CSS mit JavaScript, empfiehlt es sich, ein Framework zu verwenden.
Ich bin gerade dabei, Scriptaculous zu testen.

Allgemeines

Homepage: 1

Beispiele und Anleitungen: 2

Anleitung

1. Scriptaculous downloaden

2. Alle js-Dateien ins Verzeichnis Scripts/scriptaculous der Website kopieren

3. Folgende Zeilen in den Header der Seite einfügen:

<script src="Scripts/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="Scripts/scriptaculous/scriptaculous.js" type="text/javascript"></script>

Beispiel eines Toggle-Effekts

Ziel: ein ausgeblendetes DIV bei Klick auf einen Link einzublenden und bei nochmaligem Klick wieder auszubleden

1. Den DIV per Inline-Tag ausblenden

(div id="suchfeld" style="display:none"></div)

2. Script in eine Funktion packen (oder aber auch gleich direkt ausführen)

function einblenden2(divname) { 
  Effect.toggle(divname, 'slide');
} 

3. Die Funktion einem Link zuweisen

(a href="#"><img src="used/main02/miniicon_search.gif" onClick="einblenden2('suchfeld'); return false;" /></a)

( = <

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

Loading…
Avatar von manuel

AUTOR

manuel