script.aculo.us

script.aculo.us
Basic data
developer	Thomas Fuchs
Publishing year	June 2005
Current version	1.9.0 ; (December 23, 2010)
operating system	platform independent
programming language	JavaScript
License	MIT license
	script.aculo.us

script.aculo.us is a JavaScript - library based on the JavaScript framework Prototype builds. It offers dynamic visual effects and GUI elements via the Document Object Model (DOM). This greatly simplifies the creation of dynamic GUIs for websites.

It is especially integrated in Ruby on Rails , but is also offered separately so that it works with other web application frameworks and scripting languages.

script.aculo.us was taken from the tool fluxiom by Thomas Fuchs , a web-based digital asset management tool from the designer company wollzelle . It was first presented to the public in June 2005.

features

script.aculo.us extends the Prototype JavaScript Framework with visual effects, GUI elements and other functions.

Visual effects

There are five core effects that script.aculo.us offers: Opacity, Scale, MoveBy, Highlight, and Parallel. These effects result in over 16 additional effects that use combinations of the core effects. Programmers can also expand this palette of effects and add new effects.

To activate an effect, you have to assign an ID designation to the respective element and add a line of code for the effect. The following is an example of the Effect.Fade effect applied to a DOM element with ID 'id_of_element':

new Effect.Fade('id_of_element');

This hides the element with the target ID and at the end sets the CSS property display property to none.

Some settings, such as B. the duration and range of the effect can be set:

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

This fades in the element, but the effect stops when it is 80% finished (with an opacity of 20%).

Controls

Controls provide GUI elements, including:

Drag and drop
- Draggables
- Droppables
- Sortables
- Slider
Autocompletion
In place editing

Builder

DOM elements can be generated dynamically by the builder. Using the example code below ...

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')
    ])
  ])
]);

... the following HTML code is generated (without new lines):

<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>

literature

javascript libraries . In: c't , 8/2010, p. 154

Web links

Individual evidence

↑ Thomas Fuchs: Audible Ajax Episode 12 Ajaxian

[interview-thomasf-1] Thomas Fuchs: Audible Ajax Episode 12 Ajaxian