Harman Patil (Editor)

Script.aculo.us

Updated on
Edit
Like
Comment
Share on FacebookTweet on TwitterShare on LinkedInShare on Reddit
Developer(s)
  
Thomas Fuchs

Written in
  
JavaScript

License
  
MIT License

Development status
  
Feature-frozen

Type
  
Javascript toolkit

Stable release
  
1.9.0 / December 23, 2010 (2010-12-23)

script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model (DOM).

Contents

It is most notably included with Ruby on Rails and Seaside, but also provided separately to work with other web frameworks and scripting languages.

script.aculo.us was extracted by Thomas Fuchs from his work on fluxiom, a web based digital asset management tool by the design company wollzelle. It was first released to the public in June 2005.

Features

script.aculo.us extends the Prototype JavaScript Framework by adding visual effects, user interface controls, and utilities.

Visual effects

There are five core effects script.aculo.us offers: Opacity, Scale, MoveBy, Highlight, and Parallel. Through these effects there are over 16 additional effects using combinations of the core effects out of the box. Programmers can also extend existing and create new effects.

Enabling an effect is a matter of assigning an element with an ID name and one line of code for the effect. Below is an example for the Effect.Fade effect applied to a DOM element with an ID of 'message-box':

This will cause the target ID to fade in opacity and end by setting the CSS "display" property to "none".

Various other settings within the effect can be modified, such as the duration of the effect and the range of the effect:

This would fade the element, but stop when the effect is 80% complete (with an opacity of 20%).

Controls

Controls offers user interface elements including:

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

    Builder allows creating DOM elements dynamically. Using the sample code below:

    ...creates the following (without whitespace):

    References

    Script.aculo.us Wikipedia