script.aculo.us

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!

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!

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.

Core Effects: Effect.Highlight, Effect.Morph, Effect.Move, Effect.Opacity, Effect.Scale, Effect.Parallel

Combination Effects: Effect.Appear, Effect.BlindDown, Effect.BlindUp, Effect.DropOut, Effect.Fade, Effect.Fold, Effect.Grow, Effect.Puff, Effect.Pulsate, Effect.Shake, Effect.Shrink, Effect.SlideDown, Effect.SlideUp, Effect.Squish, Effect.SwitchOff

Effect helpers: Effect.Transitions, Effect.Methods?, Effect.tagifyText?, Effect.multiple?, Effect.toggle
Behaviours: Draggable, Droppables, Sortable, Form.Element.DelayedObserver?
Controls: Ajax.InPlaceEditor?, Ajax.InPlaceCollectionEditor?, Ajax.Autocompleter?, Autocompleter.Local?, Slider?
Miscellaneous: Builder, Sound?, Unit Testing

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

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.

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>