Script.aculo.us is a JavaScript library built on the Prototype JavaScript framework. It provides dynamic visual effects and GUI elements via the Document Object Model ( DOM). Thus, the creation of dynamic GUIs for web pages is greatly simplified.

Especially, it is integrated into Ruby on Rails, but is also sold separately, so that it is compatible with other web application frameworks and scripting languages ​​.

Script.aculo.us was taken by Thomas Fuchs from the tool fluxiom, a Web-based digital asset management tool, the designer company wollzelle. The public was first introduced in June 2005.

Features

Visual Effects

There are five core effects script.aculo.us offers: Opacity, Scale, MoveBy, Highlight, and Parallel. Through these effects, over 16 additional effects arise, use the combinations of core effects. Programmers can also extend and add new effects, these effects palette.

To activate an effect, you have to assign each element an ID name and add a line of code for the effect. Below is an example of the effect Effect.Fade, the ' id_of_element ' to a DOM element with the id is used:

New Effect.Fade ( ' id_of_element '); Thus the element with the target ID is hidden, and set at the end of the CSS property display property to none.

There may be some settings, such as the duration and area of ​​effect are set:

New Effect.Fade ( ' id_of_element '      {Duration: 2.0, from: 0.0, to: 0.8 }); Thus, the element is displayed, the effect stops, however, when it is 80 % complete ( with an opacity of 20 %).

Controls

Controls provide the GUI elements, including:

• Drag And Drop draggables
• Drop Pables
• Sortables
• Slider

Builder

By the DOM builder elements can be dynamically generated. By using the lower sample code ...

Element = Builder.node ( ' div ', {id: ' ghost train '}, [    Builder.node ( ' div ', { className: ' controls ', style: 'font -size: 11px '}, [      Builder.node ( ' h1 ', ' Ghost Train ')      "test text", 2, 3, 4,      Builder.node ( ' ul ', [        Builder.node ( ' li', { className: 'active' onclick ':' test () '}, ' Record ')      ] )    ] ) ]); ... The following HTML code is generated ( no new lines):