当前位置: 首页 > 文档资料 > MooTools 中文文档 >

Class/Extras

优质
小牛编辑
129浏览
2023-12-01

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[, ...]]]);

参数:

    fn - (function or array)函数(或函数数组)追加到调用链接尾。

返回:

  • (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]);

参数:

  1. 传递参数到当前要执行的函数。

返回:

  • (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]);

参数:

  1. type - (string)事件的类型(例如'complete') 。
  2. fn - (function)事件函数。
  3. 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);

参数:

  1. 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]]);

参数:

  1. type - (string)事件的类型(例如'complete') 。
  2. args - (mixed,optional)传递给函数的参数。要传递多个参数,该参数必须是一个数组。
  3. 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]);

参数:

  1. 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]);

参数:

  1. 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!'