script.aculo.us - Übersicht

Was ist script.aculo.us?

script.aculo.us ist eine JavaScript-Bibliothek, die auf dem Prototype JavaScript Framework aufbaut , die GUI verbessert und den Webbenutzern Web 2.0-Erfahrung bietet.

script.aculo.us wurde von Thomas Fuchs entwickelt und erstmals im Juni 2005 veröffentlicht.

script.aculo.us bietet dynamische visuelle Effekte und Elemente der Benutzeroberfläche über das Document Object Model (DOM).

Das Prototype JavaScript Framework ist ein von Sam Stephenson erstelltes JavaScript-Framework, das ein Ajax-Framework und andere Dienstprogramme bereitstellt.

Wie installiere ich script.aculo.us?

Es ist ganz einfach, die Bibliothek script.aculo.us zu installieren. Es kann in drei einfachen Schritten eingerichtet werden -

Gehen Sie zur Download-Seite , um die neueste Version in einem praktischen Paket herunterzuladen.
Entpacken Sie das heruntergeladene Paket und Sie finden die folgenden Ordner -
- lib - enthält die Datei prototype.js.
- src - enthält die folgenden 8 Dateien -
  - builder.js
  - controls.js
  - dragdrop.js
  - effects.js
  - scriptaculous.js
  - slider.js
  - sound.js
  - unittest.js
- test - enthält Dateien zu Testzwecken.
- CHANGELOG - Datei, die den Verlauf aller Änderungen enthält.
- MIT-LICENSE - Datei mit Beschreibung der Lizenzbedingungen.
- README - Datei, die das Installationspaket einschließlich der Installationsanweisungen beschreibt.
Legen Sie nun die folgenden Dateien in einem Verzeichnis Ihrer Website ab, z. B. / javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js

NOTE - Die Dateien sound.js und unittest.js sind optional

Wie verwende ich die script.aculo.us Bibliothek?

Jetzt können Sie das Skript script.aculo.us wie folgt einfügen :

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

Standardmäßig lädt scriptaculous.js alle anderen JavaScript-Dateien, die für Effekte, Drag & Drop, Schieberegler und alle anderen Funktionen von script.aculo.us erforderlich sind.

Wenn Sie nicht alle Funktionen benötigen, können Sie die zusätzlichen Skripte, die geladen werden, einschränken, indem Sie sie in einer durch Kommas getrennten Liste angeben, z.

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

Die Skripte, die angegeben werden können, sind -

effects
dragdrop
builder
controls
slider

NOTE - Bei einigen Skripten müssen andere geladen werden, damit sie ordnungsgemäß funktionieren.

Wie rufe ich eine script.aculo.us-Bibliotheksfunktion auf?

Verwenden Sie zum Aufrufen einer bibliotheksfunktion script.aculo.us HTML-Skript-Tags wie unten gezeigt -

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

Hier verwenden wir das Effektmodul und wenden den Highlight- Effekt auf ein Element an.

Dies führt zu folgendem Ergebnis:

Eine andere einfache Möglichkeit, die Funktion eines Moduls aufzurufen, besteht in den Ereignishandlern wie folgt:

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

Dies führt zu folgendem Ergebnis: