JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson in February 2005 as part of the foundation for Ajax support in Ruby on Rails. It is implemented as a single file of JavaScript code, usually named prototype.js...
, providing dynamic visual effects and user interface elements via the Document Object Model
Document Object Model
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
Ruby on Rails, often shortened to Rails or RoR, is an open source web application framework for the Ruby programming language.-History:...
and Seaside, but also provided separately to work with other web application frameworks and scripting languages.
script.aculo.us was extracted by Thomas Fuchs from his work on fluxiom, a web based digital asset management
Digital asset management
Digital asset management consists of management tasks and decisions surrounding the ingestion, annotation, cataloguing, storage, retrieval and distribution of digital assets...
tool by the design company wollzelle. It was first released to the public in June 2005.
The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson in February 2005 as part of the foundation for Ajax support in Ruby on Rails. It is implemented as a single file of JavaScript code, usually named prototype.js...
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 ID of 'id_of_element':
new Effect.Fade('element_id');
This will cause the target ID to fade in opacity and end by setting the CSS "display" property to "none".
You can also modify various settings within the effect such as duration of the effect and range of the effect:
new Effect.Fade('element_id', {
duration: 2.0,
from: 0.0,
to: 0.8
});
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:
