script.aculo.us
script.aculo.us
|
|
---|---|
Basic data
|
|
developer | Thomas Fuchs |
Publishing year | June 2005 |
Current version | 1.9.0 (December 23, 2010) |
operating system | platform independent |
programming language | JavaScript |
License | MIT license |
script.aculo.us |
script.aculo.us is a JavaScript - library based on the JavaScript framework Prototype builds. It offers dynamic visual effects and GUI elements via the Document Object Model (DOM). This greatly simplifies the creation of dynamic GUIs for websites.
It is especially integrated in Ruby on Rails , but is also offered separately so that it works with other web application frameworks and scripting languages.
script.aculo.us was taken from the tool fluxiom by Thomas Fuchs , a web-based digital asset management tool from the designer company wollzelle . It was first presented to the public in June 2005.
features
script.aculo.us extends the Prototype JavaScript Framework with visual effects, GUI elements and other functions.
Visual effects
There are five core effects that script.aculo.us offers: Opacity, Scale, MoveBy, Highlight, and Parallel. These effects result in over 16 additional effects that use combinations of the core effects. Programmers can also expand this palette of effects and add new effects.
To activate an effect, you have to assign an ID designation to the respective element and add a line of code for the effect. The following is an example of the Effect.Fade effect applied to a DOM element with ID 'id_of_element':
new Effect.Fade('id_of_element');
This hides the element with the target ID and at the end sets the CSS property display property to none.
Some settings, such as B. the duration and range of the effect can be set:
new Effect.Fade('id_of_element',
{ duration:2.0, from:0.0, to:0.8 });
This fades in the element, but the effect stops when it is 80% finished (with an opacity of 20%).
Controls
Controls provide GUI elements, including:
- Drag and drop
- Draggables
- Droppables
- Sortables
- Slider
- Autocompletion
- In place editing
Builder
DOM elements can be generated dynamically by the builder. Using the example 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')
])
])
]);
... the following HTML code is generated (without new lines):
<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>
See also
literature
- javascript libraries . In: c't , 8/2010, p. 154
Web links
- official website
- Documentation (Wiki)
- Cheat sheet
- German-language effects introduction
- Google Code developer guide
Individual evidence
- ↑ Thomas Fuchs: Audible Ajax Episode 12 Ajaxian