Library: scriptaculous.js
script.aculo.us is a powerful AJAX library that builds on top of the Prototype JavaScript library (which is also included with Chickenfoot as prototype.js). It is composed of several major components which are described on the scriptaculous wiki:- Visual Effects
- Controls (DragDrop, Autocomplete, Sliders, etc.)
- Utils (for building DOM fragments)
- Testing
Scriptaculous is designed so that most functions accept either an Element or an id
as an argument when some sort of node is required. For example, all of the following will
have the same effect on yahoo.com:
go('yahoo')
include('scriptaculous.js')
// fp is the id for the main search box on Yahoo!
Effect.Shake('fp')
Effect.Shake(document.getElementById('fp'))
Effect.Shake($('fp')) // $() is shorthand for getElementById() in prototype.js
Fortunately, we have tweaked the library so that it can also accept
a Chickenfoot Match object so you need not worry about
nodes and their ids – the following will work just fine:
Effect.Shake(find('first textbox'))
Here is a script that demonstrates the use of Scriptaculous's autocomplete control.
It takes you to Google and adds autocomplete to the search box,
letting you autocomplete properties of the global Chickenfoot object.
(Though the script may look complex, the majority of it is the CSS for the autocomplete dropdown.