Visuelle Effekte

Es gibt fünf Kerneffekte, script.aculo.us bietet: Opacity, Scale, MoveBy, Highlight, und Parallel. Durch diese Effekte ergeben sich über 16 zusätzliche Effekte, die Kombinationen der Kerneffekte nutzen. Programmierer können diese Effektpalette auch noch erweitern und neue Effekte hinzufügen.

Um einen Effekt zu aktivieren, muss man dem jeweiligen Element eine ID-Bezeichnung zuordnen und eine Zeile Code für den Effekt hinzufügen. Nachfolgend ist ein Beispiel des Effekts Effect.Fade, der auf ein DOM-Element mit der ID 'id_of_element’ angewandt wird:

new Effect.Fade('id_of_element');

Dadurch wird das Element mit der Ziel-ID ausgeblendet und am Ende die CSS-Eigenschaft display-Eigenschaft auf none gesetzt.

Es können einige Einstellungen, wie z. B. die Dauer und Reichweite des Effekts eingestellt werden:

new Effect.Fade('id_of_element',
    { duration:2.0, from:0.0, to:0.8 });

Dadurch wird das Element eingeblendet, der Effekt stoppt allerdings, wenn er 80 % fertig ist (bei einer Deckkraft von 20 %).

Controls

Controls bieten GUI-Elemente, darunter:

• Drag And Drop
  • Draggables
  • Droppables
  • Sortables
  • Slider
• Autocompletion
• In Place Editing

Builder

Durch den Builder können DOM-Elemente dynamisch erzeugt werden. Durch Benutzung des unteren Beispielcodes …

element = Builder.node('div',{id:'ghosttrain'},[
  Builder.node('div',{className:'controls',style:'font-size:11px'},[
    Builder.node('h1','Ghost Train'),
    "testtext", 2, 3, 4,
    Builder.node('ul',[
      Builder.node('li',{className:'active', onclick:'test()'},'Record')
    ])
  ])
]);

… wird folgender HTML-Code erzeugt (ohne neue Zeilen):

<div id="ghosttrain">
  <div class="controls" style="font-size:11px">
    <h1>Ghost Train</h1>
    testtext234
    <ul>
      <li class="active" onclick="test()">Record</li>
    </ul>
  </div>
</div>