CIS 119 - script.aculo.us

Objectives

• use some of the major features of the script.aculo.us JavaScript library

script.aculo.us

• available from script.aculo.us
• built on top of prototype.js (and requires it to run)
• provides many cross-browser compatible special effects
• consists of a number of JavaScript libraries
  • scriptaculous.js: the core library needed to run everything
  • dragdrop.js: supports drag & drop functionality
  • effects.js: the visual effects library
  • slider.js: a slider control which can select from a range of values
  • sound.js: supports sounds within JavaScript
  • unittest.js: a unit testing framework for JavaScript code
  • builder.js: used to create DOM elements
  • controls.js: in-place editing and autocomplete features
• Amy Hoy's script.aculo.us combination effects cheat sheet
• first include a link to the prototype.js library
• including scriptaculous.js will load all the scriptaculous libraries
• you can specify what libraries to load: scriptaculous.js?load=effects,dragdrop

Including JavaScript code in a legal XHTML way

• the following actually has to be done to be strictly legal in XHTML:

  <script type="text/javascript">
    // <![CDATA[
    ... this is where your JavaScript would go ...
    // ]]>
  </script>

Core script.aculo.us effects

• Highlight
• Morph
• Move
• Opacity
• Scale
• Parallel
• Queues

Combination script.aculo.us effects

• Appear
• BlindDown
• BlindUp
• DropOut
• Fade
• Fold
• Grow
• Puff
• Pulsate
• Shake
• Shrink
• SlideDown
• SlideUp
• Squish
• SwitchOff
• ScrollTo

script.aculo.us behaviors

• Draggable
• Droppables
• Sortable

Examples

1. a draggable image example
2. a draggable form example
3. simple game level editor example
4. lots of effects