Popular JavaScript Framework Libraries: Prototype, script.aculo.us, and MooTools / Page 2 | WebReference

Popular JavaScript Framework Libraries: Prototype, script.aculo.us, and MooTools / Page 2


[previous] [next]

Popular JavaScript Framework Libraries: Prototype, script.aculo.us, and MooTools [con't]

script.aculo.us

URL: http://script.aculo.us/
Blog: n/a
Docs: http://wiki.script.aculo.us/

The script.aculo.us library isn't a Framework itself, but rather an add-on to the Prototype Framework. Their focus is primarily the user interface - particularly visual effects and interface behaviors. script.aculo.us provides six core effects: Opacity, Scale, Morph, Move, Highlight and Parallel. Combination effects use these to achieve many more complicated effects. There's also a big collection of user-contributed effects to choose from. Interface behaviors. are implemented in objects such as Draggables, Droppables and Sortables. Finally, the script.aculo.us Framework provides several complete controls to choose from, including the Slider, Autocompletion and In Place Editor, to name a few.

Core Effects

The seven core effects listed above are the foundation of the script.aculo.us Visual Effects JavaScript library. The basic syntax to start an effect is: new Effect.EffectName(element, required-params, [options]);. The element parameter can be either a string containing the ID of the element or the DOM element itself. The required-params argument depends on the effect being called and might not be needed. In fact, most effects don't have required parameters. The options parameter is a hash that provides any additional customization parameters to the effect. Options can be general or effect-specific. Here's some code that changes an element's opacity from .5 to 1 in a linear transition of two seconds:

Here's the demo (at the bottom of the page).

Combination Effects

These are the combination effects which are included in script.aculo.us:

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

There's also the Effect.toggle() utility method for displaying elements temporarily with a Appear/Fade, Slide or Blind animation. All the combination effects are based on the Core Effects, and can be used as the basis for writing your own effects.

Here's an example of the Effect.Shake() function, which moves the element slightly to the left, then to the right, repeatedly:

The parameters are: The ID of the element, the duration of the effect, and the distance to move the element, in pixels. Only the first parameter is required.

Here's the demo (at the bottom of the page).

Behaviors.

The Behaviors module contains classes that let you add special behaviors to elements in the document. They include: Draggable, Droppables, and Sortable.

A Draggable object is one you can move using the mouse. Its syntax is: new Draggable('id_of_element', [options]);. The options are a hash object that can contain numerous optional properties. For example, setting the options to { revert: true, snap: [40, 40] } will cause the element to move back to the location provided in the snap property. You could also set the options to { scroll: window } to have the browser scroll to keep the element in view.

Here are the demos (at the bottom of the page)

Droppables are used in conjunction with Draggables. A Droppables element reacts when a Draggable is dropped onto it. To add a Draggable to the Droppables on the page, use the Droppables.add() class method. In the following example, the 'shopping_cart' element is added to the Droppables object. The accept property tells it that the class of the object must be of type 'products.' Letting go of the left mouse button within the Droppables container will cause the 'shopping_cart_text' element's text to be updated with the element's alt text:

View the demo. (at the bottom of the page).

The last behavior, called a Sortable, is a quick way to initialize many Draggable elements in a container element. When you create a new Sortable, script.aculo.us takes care of the creation of the corresponding draggable Droppables. Its format is as follows: Sortable.create('id_of_container',[options]);. The Sortable object also provides a couple of useful functions. The Sortable.serialize() function serializes the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call. The Sortable.sequence() function retrieves the values in an sequence array object.

View the demo.

Controls

The in-place editor allows for AJAX-backed "on-the-fly" textfields. The syntax is as follows: new Ajax.InPlaceEditor( element, url, {options});. The constructor takes three parameters: the first is the element that should support in-place editing; the second is the URL to submit the changed value to (the server should respond with the updated value); the third is a hash of options. The server-side component gets the new value as the parameter "value" (POST method), and should send the new value as the body of the response.

View the demo.

The Ajax.InPlaceCollectionEditor is an AJAX-based "on-the-fly" field with a select box instead of Ajax.InPlaceEditor text field. Its constructor looks like this: new Ajax.InPlaceCollectionEditor( element, url, { collection: [array], [moreOptions] } );. The constructor takes three parameters: the first is the element that should support in-place editing; the second is the url to submit the changed value to ( again, the server should respond with the updated value); the third is a hash of options. Within that hash of options should be a field called collection that is an array of values to place inside your select box. The server-side component gets the new value as the parameter "value" and should send the new value as the body of the response:

View the demo.

There's also highly a flexible Ajax.Autocompleter control that allows you to choose what container to populate with suggestions. Here's an example which provides: the id of the text field, the id of the container to populate, the url of the server-side script, and an options hash. The latter includes:

  • The name of the parameter for the string typed by the user on the autocompletion field.
  • The minimum number of characters that must be entered in the input field before an Ajax request is made.
  • A custom function to replace the built-in function that adds the list item text to the input field. The custom function is called after the element has been updated (i.e. when the user has selected an entry).
  • The ID of an element to display while the Ajax request is in progress. This element will be hidden once the request is completed. This is useful for displaying an animated icon such as a spinner or hourglass during processing.

View the demo.

The Autocompleter.Local control is the same as the Ajax.Autocompleter except that it uses a local array of strings to populate the suggestions container. It's useful for static lists or where a slow connection may be an issue.

The srcipt.aculo.us Framework has a great slider control which can be used to select a single or multiple values from a given range, even a set of fixed values. Like other controls, creating one can be as simple as calling the Control.Slider() constructor with the IDs or elements for the handle and tracks, or you can provide a hash object with a number of options, as in the following example:

Here's how we would create a slider control which selects from a set of fixed values:

Here are several demos of the Control.Slider.

If these controls don't suit your needs, remember that there are dozens of user-submitted controls and more being added every day!


[previous] [next]