Browser
Laut der script.aculo.us-Homepage ist die Bibliothek mit allen gängigen Browsern kompatibel, d.h. Firefox, Opera, Konqueror, Safari und Internet Explorer. Ich habe alle Beispiele für das Tutorial im Firefox 2, Opera 9 und Internet Explorer 7 getestet. Theoretisch müssten die Beispiele auch auf den anderen Browsern funktionieren, wenn nicht bitte ich um Feedback.
Ich persönlich bevorzuge den Firefox, weil er mir zwei wertvolle Werkzeuge liefert: Den DOM Inspector und die Fehler-Konsole, ohne den das programmieren von JAvaScript unerträglich wäre.
Fähigkeiten
Um dieses Tutorial zu verstehen ist es notwendig, gute Kenntnisse in HTML und CSS zu haben. Sollte dir in dieser Hinsicht etwas unklar sein, ist noch immer de.selfhtml.org die beste Informationsquelle. Auch JavaScript-Kenntnisse können nicht schaden. Um einige Effekte in die eigene Homepage einzubauen reichen da vielleicht sehr geringe, um die komplexeren Beispiele zu verstehen, rate ich, sich zuerst mit JavaScript vertraut zu machen. Auch dafür gibts eine Einführung auf Selfhtml.
Die JavaScript-Dateien, die für das Tutorial benötigt werden findet man unter http://script.aculo.us/downloads als Zip-Datei. Im Download inbegriffen ist die jeweils aktuelle stabile Prototype-Version. Prototype ist ein JavaScript-Framework, welches viele nützliche Funktionen, die das Arbeiten mit JavaScript erleichtern sollen, zur Verfügung stellt.
Die heruntergeladene Scriptaculous Zip-Datei beinhaltet drei Unterordner, wichtig für uns sind die Ordner 'lib' und 'src'. Im Unterordner 'lib' (steht für Library) findet man die Datei prototype.js, die Voraussetzung für das Funktionieren von Scriptaculous ist. Im Ordner 'src' (steht für Source) findest du die eigentlichen Quelltexte. Kopiere nun die prototype.js und alle Dateien aus dem Ordner 'src' in einen Unterordner deines Webprojekts, z.B. 'js'.
Um mit Scripaculous arbeiten zu können mußt du die Bibliotheken prototype.js und scriptaculous.js in dein HTML-File einbinden. Das geht mittels des Script-Tags und seien Attributen 'type' und 'src', wobei 'type' für die Art des Scripts steht und 'src' den Pfad zur Datei angibt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Beispiel 1</title> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script> </head> <body> <div onclick="new Effect.Fade(this)"> Klicken um auszublenden!
</div> </body> </html>
Beispiel - So sieht's aus!
Ganz wichtig ist, dass zuerst Prototype und erst danach Scriptaculous eingebunden wird, da Scriptaculous auf Prototype basiert und daher dessen Funktionen benötigt.Der <div> Bereich ist nur dazu da, um zu testen ob die Einbindung funktioniert hat. Wenn dir dessen Funktion nicht ganz klar ist, beachte ihn nicht weiter.
Scriptaculous besteht ja aus mehreren Dateien. Standardmäßig werden alle anderen Dateien von scriptaculous.js geladen. Meistens wird es allerdings so sein, dass du nicht den ganzen Funktionsumfang benötigst. Deshalb ist es besser, beim Einbinden die benötigten Scripts (ohne Endung '.js') anzugeben. Bei unserem Beispiel oben wäre das:
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
Werden mehrere Scripte benötigt, können diese durch Beistriche getrennt angegeben werden.
<script type="text/javascript" src="js/scriptaculous.js?load=effects,slider,dragdrop"> </script>
(C)Copyright 2007 Thomas Lemmé. Feedback und Fragen auf meinem Blog web/code.
