script.aculo.us
This article may have been previously nominated for deletion: Wikipedia:Articles for deletion/Script.aculo.us exists. It is proposed that this article be deleted because of the following concern:
If you can address this concern by improving, copyediting, sourcing, renaming, or merging the page, please edit this page and do so. You may remove this message if you improve the article or otherwise object to deletion for any reason. Although not required, you are encouraged to explain why you object to the deletion, either in your edit summary or on the talk page. If this template is removed, do not replace it. This message has remained in place for seven days, so the article may be deleted without further notice. Find sources: "Script.aculo.us" – news · newspapers · books · scholar · JSTOR Timestamp: 20210630090025 09:00, 30 June 2021 (UTC) Administrators: delete |
 | This article has multiple issues. Please help improve it or discuss these issues on the talk page. (Learn how and when to remove these messages)
|
 | |
| Developer(s) | Thomas Fuchs |
|---|---|
| Final release | 1.9.0
/ December 23, 2010 |
| Repository | |
| Written in | JavaScript |
| Type | JavaScript library |
| License | MIT License |
| Website | script |
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).
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.[1] 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':
new Effect.Fade('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:
new Effect.Fade('message-box', {
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:
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 whitespace):
<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>
References
External links
- Official website
- scriptaculous on GitHub
- script.aculo.us documentation wiki
- Unofficial Prototype & Script.aculo.us wiki and FAQ created by community members
| Dialects | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Engines (comparison) | |||||||||
| Frameworks |
| ||||||||
| People |
| ||||||||
| Other | |||||||||
| |||||||||
.svg){kind=logo} | This free and open-source software article is a stub. You can help Wikipedia by expanding it. |