script.aculo.us Web 2.0 JavaScript

script.aculo.us is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more. Be sure to have a look at the demos!

API Documentation and Reference

This wiki details Version 1.8.1 of the library, which is the most current version of the 1.x trunk of script.aculo.us.

script.aculo.us is open source. Read up on how to contribute by finding bugs, making bug reports and helping fixing them.

Help port the old, dead wiki to github and earn BIG BROWNIE POINTS! You can find a copy of the old wiki contents at http://script.aculo.us/docs. See some helpful hints for porting, and please follow the style guide!

Quick start

1. Download & install

Using script.aculo.us is easy! First, go to the script.aculo.us downloads page to grab yourself the latest version in a convenient package. Follow the instructions there, then return here.

Next, put prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js and controls.js in a directory of your website, e.g. /javascripts.

Third, load script.aculo.us in your web page. This is done by linking to the scripts in the head of your document.

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

The scriptaculous.js loader script will automatically load in the other libraries.

By default, scriptaculous.js loads all of the other javascript files necessary for effects, drag-and-drop, sliders, and all of the other script.aculo.us features. If you don’t need all of the features, you can limit the additional scripts that get loaded by specifying them in a comma-separated list, e.g.:

<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

The scripts that can be specified are: builder, effects, dragdrop, controls, and slider

Note that some of the scripts require that others be loaded in order to function properly.

2. Use it!

To call upon the functions, use HTML script tags.
The best way is to define them like this:

<script type="text/javascript" language="javascript">
  // <![CDATA[
  $('element_id').appear();
  // ]]>
</script>

This way, you won’t have to worry about using characters like < and > in your Java Script code.

You can also use effects inside event handlers:

<div onclick="$(this).switchOff()">
  Click here if you've seen enough.
</div>

If you want to get tricky with it, you can pass extra options to the effect like duration, fps (frames per second), and delay.

<div onclick="$(this).blindUp({ duration: 16 })">
  Click here if you want this to go slooooow.
</div>

Next steps

Have a look at the demos to catch a glimpse of what you can achieve. Read the documentation. Create the next killer application!