the compact javascript framework
in partnership with mediatemple
Contains common implementations for custom classes. In Mootools is implemented in Ajax, XHR and Fx.Base and many more.
MIT-style license.
Class. Extras.js | Contains common implementations for custom classes. |
Chain | An “Utility” Class. |
Properties | |
chain | adds a function to the Chain instance stack. |
callChain | Executes the first function of the Chain instance stack, then removes it. |
clearChain | Clears the stack of a Chain instance. |
Events | An “Utility” Class. |
Properties | |
addEvent | adds an event to the stack of events of the Class instance. |
fireEvent | fires all events of the specified type in the Class instance. |
removeEvent | removes an event from the stack of events of the Class instance. |
Options | An “Utility” Class. |
Properties | |
setOptions | sets this.options |
An “Utility” Class. Its methods can be implemented with Class.implement into any Class. Currently implemented in Fx.Base, XHR and Ajax. In Fx.Base for example, is used to execute a list of function, one after another, once the effect is completed. The functions will not be fired all togheter, but one every completion, to create custom complex animations.
var myFx = new Fx.Style('element', 'opacity'); myFx.start(1,0).chain(function(){ myFx.start(0,1); }).chain(function(){ myFx.start(1,0); }).chain(function(){ myFx.start(0,1); }); //the element will appear and disappear three times
Properties | |
chain | adds a function to the Chain instance stack. |
callChain | Executes the first function of the Chain instance stack, then removes it. |
clearChain | Clears the stack of a Chain instance. |
Executes the first function of the Chain instance stack, then removes it. The first function will then become the second.
An “Utility” Class. Its methods can be implemented with Class.implement into any Class. In Fx.Base Class, for example, is used to give the possibility add any number of functions to the Effects events, like onComplete, onStart, onCancel. Events in a Class that implements Events can be either added as an option, or with addEvent. Never with .options.onEventName.
var myFx = new Fx.Style('element', 'opacity').addEvent('onComplete', function(){ alert('the effect is completed'); }).addEvent('onComplete', function(){ alert('I told you the effect is completed'); }); myFx.start(0,1); //upon completion it will display the 2 alerts, in order.
This class can be implemented into other classes to add the functionality to them. Goes well with the Options class.
var Widget = new Class({ initialize: function(){}, finish: function(){ this.fireEvent('onComplete'); } }); Widget.implement(new Events); //later... var myWidget = new Widget(); myWidget.addEvent('onComplete', myfunction);
Properties | |
addEvent | adds an event to the stack of events of the Class instance. |
fireEvent | fires all events of the specified type in the Class instance. |
removeEvent | removes an event from the stack of events of the Class instance. |
adds an event to the stack of events of the Class instance.
type | string; the event name (e.g. ‘onComplete’) |
fn | function to execute |
fires all events of the specified type in the Class instance.
type | string; the event name (e.g. ‘onComplete’) |
args | array or single object; arguments to pass to the function; if more than one argument, must be an array |
delay | (integer) delay (in ms) to wait to execute the event |
var Widget = new Class({ initialize: function(arg1, arg2){ ... this.fireEvent("onInitialize", [arg1, arg2], 50); } }); Widget.implement(new Events);
removes an event from the stack of events of the Class instance.
type | string; the event name (e.g. ‘onComplete’) |
fn | function that was added |
An “Utility” Class. Its methods can be implemented with Class.implement into any Class. Used to automate the options settings, also adding Class Events when the option begins with on.
var Widget = new Class({ options: { color: '#fff', size: { width: 100 height: 100 } }, initialize: function(options){ this.setOptions(options); } }); Widget.implement(new Options); //later... var myWidget = new Widget({ color: '#f00', size: { width: 200 } }); //myWidget.options = {color: #f00, size: {width: 200, height: 100}}
Properties | |
setOptions | sets this.options |
sets this.options
defaults | object; the default set of options |
options | object; the user entered options. can be empty too. |
if your Class has Events implemented, every option beginning with on, followed by a capital letter (onComplete) becomes an Class instance event.
Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and GeSHi