Jump to content

Script.aculo.us: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
FrescoBot (talk | contribs)
Bots
1,135,457 edits
m Bot: links syntax
Tag: New redirect
 
(39 intermediate revisions by 32 users not shown)
Line 1: Line 1:
#REDIRECT [[Prototype JavaScript Framework]]
{{Infobox Software

| name = script.aculo.us
{{Rcat shell|
| logo = [[Image:Scriptaculous_logo.png|350px]]
{{R to related topic}}
| developer = [[Thomas Fuchs (computer scientist) | Thomas Fuchs]]
| latest release version = 1.8.3
| latest release date = {{release date|2009|10|08}}
| genre = [[Javascript toolkit]]
| programming language = [[JavaScript]]
| license = [[MIT License]]
| website = http://script.aculo.us
}}
}}
{{lowercase|script.aculo.us}}
'''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]].

It is most notably included with [[Seaside (software)|Seaside]] and [[Ruby on Rails]], 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]] tool by the design company [[wollzelle]].<ref name="interview-thomasf">[http://ajaxian.com/archives/audible-ajax-episode-12-thomas-fuchs-of-scriptaculous Ajaxian » Audible Ajax Episode 12: Thomas Fuchs of Script.aculo.us<!-- Bot generated title -->]</ref> 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 and make 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':

<source lang="javascript">
new Effect.Fade('id_of_element');
</source>

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:

<source lang="javascript">
new Effect.Fade('id_of_element',
{ duration:2.0, from:0.0, to:0.8 });
</source>

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 the creation of DOM elements dynamically. Using the sample code below:

<source lang="javascript">
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')
])
])
]);
</source>

Creates the following (without newlines):

<source lang="html4strict">
<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>
</source>

==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:

<source lang="html4strict">
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
</source>

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.

An alternative to copying all javascript files and hosting them locally to a website, Google provides an [http://code.google.com/apis/ajaxlibs/ Ajax Libraries API] that provides both Prototype and script.aculo.us which can be accessed using the Ajax API or directly as above:

<source lang="html4strict">
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js" type="text/javascript"></script>
</source>

==References==
<div class="references-small"><references /></div>



==External links==
*[http://script.aculo.us/ script.aculo.us homepage]
*[http://github.com/madrobby/scriptaculous/wikis script.aculo.us documentation wiki]
*[http://slash7.com/articles/2006/04/22/scriptaculous-cheat-sheet-1 script.aculo.us cheat sheet]
*[http://proto-scripty.wikidot.com/ Unofficial Prototype & Script.aculo.us wiki and FAQ] created by community members

{{ECMAScript}}
{{Application frameworks}}
{{Widget toolkits}}
{{onesource|article|date=September 2007}}

[[Category:JavaScript libraries]]
[[Category:Ajax (programming)]]
[[Category:Software using the MIT license]]

[[de:Script.aculo.us]]
[[es:Script.aculo.us]]
[[it:Script.aculo.us]]
[[pl:Script.aculo.us]]
[[ru:Script.aculo.us]]
[[tr:Script.aculo.us]]

Latest revision as of 09:45, 14 July 2021

Redirect to:

Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=Script.aculo.us&oldid=1033541819"