Adds a semi-transparent overlay over a DOM element with a 'spinning' ajax icon.

• Mask

• Options, Events, Chain

new Spinner(target[, options]);

1. target - (mixed) A string of the id for an Element or an Element reference to overlay; defaults to document.body
2. options - (object) a key/value set of options

• all of Mask options PLUS:
• message - (mixed, optional) message placed above the spinner image (as in "Please wait..."). Can be a string or an element.
• class - (string) css class name to apply to the spinner container.
• containerPosition - (object) options passed to Element:position for the container of the message; relativeTo is set to the target in the arguments automatically (but can be overwritten).
• content - (object) properties for the element that contains the spinning image and the message. Defaults only to "class:spinner-content".
• img - (object or false) properties for the image element (note: not an img tag - a div); if set to false no image will be injected. Defaults to "class:spinner-img".
• fxOptions - (object) options passed to the effects used to transition the overlay and the image opacity.

You can style the layer and its contents by just defining a css style for the class names specified in the options class name (these default to ".spinner", ".spinner-content", and ".spinner-img"). You can download the default styles and spinner image here: spinner.css, spinner.gif. Without any styles nothing will show up, except for any optional message you may have passed.

• show - (function) callback to execute when the spinning layer is shown; passed the target element to which the Spinner was attached
• hide - (function) callback to execute when the spinning layer is hidden; passed the target element to which the Spinner was attached

<div id="myElement">...</div>

new Spinner('myElement');

Toggles the Spinner visibility. If the Spinner is currently visible, it will hide. Otherwise it will display.

mySpinner.toggle(element);

1. element - (mixed, optional) A string of the id for an Element or an Element reference to overlay; defaults to the target passed in at initialization, but you can specify a different element if you wish to reuse the class.

• (object) This instance of Spinner

Displays the Spinner layer.

mySpinner.show(noFx);

1. noFx - (boolean) if true the spinner will not use effects to display but will show immediately (defaults to false).

• (object) This instance of Spinner

Hides the Spinner layer.

mySpinner.hide(noFx);

1. noFx - (boolean) if true the spinner will not use effects to hide but will hide immediately (defaults to false).

Destroys the Spinner spinner layer and its contents. This renders the instance of this class inert (and further calls to its methods will throw errors).

mySpinner.destroy()

• (object) This instance of Spinner

Reasserts the position of the spinner layer and its contents.

mySpinner.position()

• (object) This instance of Spinner

Reasserts the dimensions of the overlay layer. Note that this method is called when [Spinner.position][] is called, so you needn't call it if you call position.

mySpinner.destroy()

• (object) This instance of Spinner

Extends Request to add integrated Spinner functionality.

• Request

new Request(options);

• options - (object) an object with key/value options

• all of Request options PLUS:
• useSpinner - (boolean) use the Spinner class with this request
• spinnerOptions - (object) the options object for the Spinner class
• spinnerTarget - (mixed) a string of the id for an Element or an Element reference to use instead of the one specifed in the update option. This is useful if you want to overlay a different area (or, say, the parent of the one being updated).

new Request({
    url: '/myHtmlFragment.html',
    update: $('myElement'),
    useSpinner: true,
    spinnerOptions: {...etc...}
});

• When you execute Request.send the Spinner class will automatically overlay the area on the page that's going to get updated with the new content and when this area is updated the Spinner hides itself.

Retrieves the "build-in" instance of Spinner.

myRequest.getSpinner();

• (object) This instance of Spinner

Extends the Element Type with Spinner methods.

Sets a default Spinner instance for an Element.

el.set('spinner'[, options]);

1. options - (object, optional) The Spinner options.

• (element) This Element.

el.set('spinner', {message: 'one moment...'});
el.spin(); //obscure the element with the spinner
el.unspin(); //hide the spinner

Gets the default Spinner instance for the Element.

el.get('spinner');

1. name - (string) This should always be 'spinner'.

• (object) The Element's internal Spinner instance.

el.set('spinner', {message: 'one moment...'});
el.spin(); //show the spinner
el.get('spinner'); //The Spinner instance.

Adds Spinner shortcuts to the Element class.

Retrieves the "build-in" instance of Spinner and calls its mask method.

$('myElement').spin([options]);

1. options - (object - optional) the options for the default spinner.

• (element) This Element

Retrieves the "build-in" instance of Spinner and calls its hide method.

$('myElement').unspin();

• (element) This Element