MooTools
a compact javascript framework
MooTools Core v1.4.5
Core
Browser
Slick
Class: Chain
一个工具类,能链式执行函数,及一个函数完成后触发另一个函数,它的方法能被另一个类通过Class:implement继承,当前它被Fx和Request继承.例如在Fx类里,它能用来创建复杂的自定义动画.Chain Method: constructor
语法:
新类
var MyClass = new Class({ Implements: Chain });
已存在的类
MyClass.implement(Chain);
独立类
var myChain = new Chain;
例如:
var Todo = new Class({
Implements: Chain,
initialize: function(){
this.chain.apply(this, arguments);
}
});
var myTodoList = new Todo(
function(){ alert('get groceries'); },
function(){ alert('go workout'); },
function(){ alert('code mootools documentation until eyes close involuntarily'); },
function(){ alert('sleep'); }
);
Chain Method: chain
向Chain结尾追加函数。语法:
myClass.chain(fn[, fn2[, fn3[, ...]]]);
参数:
返回:
- (object)当前类的实例。
例如:
//Fx.Tween has already implemented the Chain class because of inheritance of the Fx class.
var myFx = new Fx.Tween('myElement', {property: 'opacity'});
myFx.start(1,0).chain(
//Notice that "this" refers to the calling object (in this case, the myFx object).
function(){ this.start(0,1); },
function(){ this.start(1,0); },
function(){ this.start(0,1); }
); //Will fade the Element out and in twice.
Chain Method: callChain
移除第一个,并执行它,第二个将变成第一个.语法:
myClass.callChain([any arguments]);
参数:
- 传递参数到当前要执行的函数。
返回:
- (mixed)返回当前执行函数的返回值,如果链条为空,没有执行函数则反回false。
例如:
var myChain = new Chain();
myChain.chain(
function(){ alert('do dishes'); },
function(){ alert('put away clean dishes'); }
);
myChain.callChain(); // alerts 'do dishes'.
myChain.callChain(); // alerts 'put away clean dishes'
Chain Method: clearChain
清空一个Chain.语法:
myClass.clearChain();
返回:
- (object)当前实例。
例如:
var myFx = Fx.Tween('myElement', 'color'); // Fx.Tween inherited Fx's implementation of Chain.
myFx.chain(function(){ while(true) alert("D'oh!"); }); // chains an infinite loop of alerts.
myFx.clearChain(); // cancels the infinite loop of alerts before allowing it to begin.
Class: Events
一个工具类,这个类能被其它类通过Class:implement继承,例如,在Fx类里,'complete','start','cancel'事件, 继承Events的类必须增加一个选项或一个addEvent函数,而不是直接通过.options.onEventName增加.语法:
对于一个新类
var MyClass = new Class({ Implements: Events });
对开已存在的类
MyClass.implement(Events);
Implementing
- 这个类能被继承到其它类。
- Events被设计与Option类一块工作,当option属性以'on'开始然后一个大写字母,将被作为事件添加.(如'onComplete'将作为'complete'事件)
例如:
var Widget = new Class({
Implements: Events,
initialize: function(element){
// ...
},
complete: function(){
this.fireEvent('complete');
}
});
var myWidget = new Widget();
myWidget.addEvent('complete', myFunction);
注意事项:
- 以'on'开始的事件支持所有的方法,并且将转化成没有'on'的(例如'onComplete'转化成'complete') 。
Events Method: addEvent
添加一个事件。语法:
myClass.addEvent(type, fn[, internal]);
参数:
- type - (string)事件的类型(例如'complete') 。
- fn - (function)事件函数。
- internal - (boolean, optional)设置函数属性:internal为true。internal属性通常用来防止删除。
返回:
- (object)这个类的实例。
例如:
var myFx = new Fx.Tween('element', 'opacity');
myFx.addEvent('start', myStartFunction);
Events Method: addEvents
和addEvent相似，但接受一个对象可以一次添加多个事件。语法:
myClass.addEvents(events);
参数:
- events - (object)一个key:value对象,key事件名称(如"start" ) ，和值，当事件发生时要调用的函数。
返回:
- (object)这个类的实例。
例如:
var myFx = new Fx.Tween('element', 'opacity');
myFx.addEvents({
start: myStartFunction,
complete: function() {
alert('Done.');
}
});
Events Method: fireEvent
触发事件.语法:
myClass.fireEvent(type[, args[, delay]]);
参数:
- type - (string)事件的类型(例如'complete') 。
- args - (mixed，optional)传递给函数的参数。要传递多个参数，该参数必须是一个数组。
- delay - ( number，optional)等待时间,单位毫秒。
返回:
- (object)这个类的实例。
例如:
var Widget = new Class({
Implements: Events,
initialize: function(arg1, arg2){
//...
this.fireEvent('initialize', [arg1, arg2], 50);
}
});
Events Method: removeEvent
删除一个事件。语法:
myClass.removeEvent(type, fn);
参数:
- type - (string)事件的类型(例如'complete') 。
- fn - (function)要删除的函数。
返回:
- (object)这个类的实例。
注意事项:
如果函数具有internal属性，并设置为true，则该事件将不会被删除。Events Method: removeEvents
删除多个事件,如果没有指定,则删除所有的.语法:
myClass.removeEvents([events]);
参数:
- events - (optional)如果没有指定则删除所有事件。
- (string)事件名(例如'success')
- (object)一个key:function对像,同addEvents中的参数那样.
返回:
- (object)当前类的实例。
例如:
var myFx = new Fx.Tween('myElement', 'opacity');
myFx.removeEvents('complete');
Class: Options
一个工具类,能被另一个类通过Class:implement继承.通常自动设置一个类的option,也增加一个事件当属性以'on'+大写字母(例如'onComplete'增加一个'complete'事件).你需要用this.setOptions()设置option.语法:
对于新类
var MyClass = new Class({Implements: Options});
对于已存在的类:
MyClass.implement(Options);
Options Method: setOptions
合并默认选项.每个传入的值将被深度拷贝.如果不想深度拷贝请使用其它方法.语法:
myClass.setOptions([options]);
参数:
- options - (object, optional)用户定义的选项与默认值合并。
返回:
- (object)当前类的实例。
例如:
var Widget = new Class({
Implements: Options,
options: {
color: '#fff',
size: {
width: 100,
height: 100
}
},
initialize: function(options){
this.setOptions(options);
}
});
var myWidget = new Widget({
color: '#f00',
size: {
width: 200
}
});
//myWidget.options is now: {color: #f00, size: {width: 200, height: 100}}
// Deep copy example
var mySize = {
width: 50,
height: 50
};
var myWidget = new Widget({
size: mySize
});
(mySize == myWidget.options.size) // false! mySize was copied in the setOptions call.
Options in combination with Events
如果一个类继承了Events和Option,每个'on'+大写字母(如'onStart')将是一个事件,假设选项值为function.例如:
var Widget = new Class({
Implements: [Options, Events],
options: {
color: '#fff',
size: {
width: 100,
height: 100
}
},
initialize: function(options){
this.setOptions(options);
},
show: function(){
// Do some cool stuff
this.fireEvent('show');
}
});
var myWidget = new Widget({
color: '#f00',
size: {
width: 200
},
onShow: function(){
alert('Lets show it!');
}
});
myWidget.show(); // fires the event and alerts 'Lets show it!'
copyright ©2006-2014 Valerio Proietti , translate by Jobin Sun