Script.aculo.us is a JavaScript library built on the Prototype Javascript Framework. Script.aculo.us provides dynamic visual effects and user interface elements via the Document Object Model.
| script.aculo.us | |
|---|---|
| Developer(s) | Thomas Fuchs |
| Stable release | |
| Repository | |
| Type | JavaScript toolkit |
| License | MIT License |
| Website | script.aculo.us |
It is most notably included with Ruby on Rails, but also provided separately to work with other web application frameworks and scripting languages.
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. Though these effects, there are over 16 additional effects using combinations of the core effects out of the box. Programmers can even extend and make new effects.
Enabling an effect is a matter of assigning and element with an ID name and one line of code for the effect. Below is an example for the Effect.Fade effect applied to an DOM element ID of 'id_of_element':
Effect.Fade('id_of_element');
This will cause the target ID to fade in opacity and end by setting the CSS display property of none.
You can also modify various settings with in the effect such as duration of the effect and range of the effect:
Effect.Fade('id_of_element',
{ duration:2.0,
from:0.0, to:0.8 });
This would fade the element, but stop when the effect is 80% complete.
Controls
Controls offers user interface elements including:
- Drag And Drop
- Graggables
- Droppables
- Sortables
- Slider
- Autocompletion
- In Place Editing
Builder
Builder allows the creation of DOM elements dynamically. Using the sample 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')
]),
]),
]);
Creates the following (without newlines):
<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>
Usage
Incorporating Script.aculo.us into a website requires copying all javascript files in a folder and the following lines inserted in the head of an HTML document:
<script src="javascripts/prototype.js" type="text/javascript"></script> <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
These lines must be loaded first before any javascript requesting any Prototype or Script.aculo.us functions. Once loaded, these functions can be called in any valid javascript ___location including script tags and event handlers.
Related links
External links
 | This computer-programming-related article is a stub. You can help Wikipedia by expanding it. |