mootools框架【十】-mootools深层探讨

mootools【十】- window的扩展及多彩世界

一. Mootools 框架对 Window的扩展: 

    浏览器的window对象本身就提供了我们很多的对浏览器本身属性的获取或设置的方法，但是我们也知道，由于各大浏览器之间对标准的实现不统一，导致很多方法功能上有所出入，mootools为我们统一了我们最常用的一些方法：

    mootools的Window.Base.js里面，主要实现了对DOM树创建完成的事件监听。以前，我们可能经常把javascript代码写在html代码的最后面获者加上defer属性，以保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话，javascript将获取不到目标元素而出错)，但是，这种方式看起来还是太杂乱，保险系数也不是最高的。其实像ie的话可以根据document的readyState属性来判断文档树的建立状态，而有些浏览器在创建文档树之后会触发onload事件，mootools把这些都包装了起来，形成一个统一的自定义事件"domready"，你可以像添加其他监听器一样来为window添加这个domready事件的监听器方法：

    window.addEvent('domready', function(){

        alert('the dom is ready');

});

备注: ---这就是为什么只要用到 mootools框架的地方总是以给页面添加事件: window.addEvent('domready', function(){ //操作内容...}开始的原因. 这样这可保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话，javascript将获取不到目标元素而出错)

另外，有个快捷方法，效果和以上相同：

    window.onDomReady(function(e){

         alert('dom is ready!!!');

    });

 

    mootools的Window.Size.js提供了一系列和浏览器window的尺寸有关的工具方法。

window的扩展方法：

getWidth ：获取window的当前高度(不包含滚动条的滚动量，即当前能见

视野高度)

getHeight：获取window的当前宽度(不包含滚动条的滚动量，即当前能见 视野宽度)

getScrollWidth：获取window的当前高度(包含了整个内容区域，即可滚动 部分也计算在内)

getScrollHeight：获取window的当前宽度(包含了整个内容区域，即可滚动 部分也计算在内)

getScrollLeft：获取window滚动的水平偏移量

getScrollTop：获取window滚动的垂直偏移量

getSize：获取window上面几个方法的提供的数据，格式：

{

    'size': {'x': this.getWidth(), 'y': this.getHeight()},

    'scrollSize':{'x': this.getScrollWidth(),'y': this.getScrollHeight()},

    'scroll':{'x': this.getScrollLeft(),'y': this.getScrollTop()}

}

二. 多彩的开始1

    mootools中集成了一些非常好用的界面组件， 也提供了非常好用的界面效果工具类。

    mootools的界面库Moo.Fx的设计十分的讲究OO原则，通过对提供了基本功能的基类的继承，扩展出了不同功能的工具类和组件类。Fx.Base就是这样一个基础类，它本身实现了Events,Chain,Options三个类，它包含了界面效果的最基本的动作和属性：

构造方法的可选属性：

onStart：效果开始前执行的方法，默认是一个空的function。你可以指定你

的function。

onComplete：完成效果后执行的方法，默认是一个空的function。你可以指 定你的function。

onCancel：中断效果后执行的方法，默认是一个空的function。你可以指定 你的function。

transition：效果的过渡变换所使用的方程，用来描述效果的变化规律。你可 以在Fx.Transitions类中找到其他的方程，默认使用的是

Fx.Transitions.sineInOut(即正弦)

duration：变化频率，毫秒。默认为500。

unit：变化量的单位。默认是'px',你可以指定如'em','%'之类。

wait ：true/false。指定在执行下一个过渡效果之前是否等待当前的过渡效果

执行结束。默认为true

fps：帧频。即每秒所执行的变换次数。默认为30帧/秒。

方法：

set：不经过过渡变换效果，直接设置为指定的值

  var myFx = new Fx.Style('myElement', 'opacity').set(0);

start：执行效果，让指定的开始值过渡变换到指定的结束值

  var myFx = new Fx.Style('myElement', 'opacity').start(0,1);

stop：中断效果的执行，如果指定了参数为false,则会执行onCancel指定的 方法。

最后，如果要查看有哪些变换方程可以选用，可以看Fx.Transitions.js里的Fx.Transitions类，里面提供了非常之多的变换方程，具体的效果差别，自己去一个个去试试看吧。

三. 多彩的开始2 

    Fx.Base类，它是mootools效果库Fx的基础，而平时会使用最频繁的，就是Fx.Style类，它是直接继承了Fx.Base类的。这个效果类非常强大，基本上可以实现对CSS样式中任何一个属性的过渡变换。

    Fx.Base中提供的方法在Fx.Style中都能用，用法是相同的，其他扩展的方法如下：

方法：

hide：如同调用Fx.Base的set方法，并且参数为0（即set(0)）,当效果作 用在opacity,或者width,height(overflow需要是hidden)的时候,调用这个 方法的效果是隐藏元素。

   var myFx = $('myDiv').effect('width', {duration: 1000});

  myFx.hide();

start：在两个区间之间进行过渡变换，和Fx.Base的start用法一样。

   var marginChange = new Fx.Style('myElement', 'margin-top', 

{duration:500});

marginChange.start(10);//从myElement当前的margin-top值过渡到10

    marginChange.start(1,20); //myElement的margin-top值从1过渡到20

    由于Fx.Style的引入，Element又被扩展了一个实现效果的快捷方法： effect

具体用法如下：

   var myEffect = $('myElement').effect('height', {duration: 1000, transition: 

Fx.Transitions.linear});

  myEffect.start(10, 100);

    想实现同时进行多个效果怎么做？Fx.Styles就是提供这样功能的一个类，它也是直接继承了Fx.Base的类，可以像这样来使用它：

var myFx = new Fx.Styles('myDiv', {duration: 1000});

  myFx.start({

    'width':[100,300],

    'height':[100,200]

  });

同样，Effect由此多了一个effects快捷方法，可以这样使用：

var myFxs= $(myElement).effects({duration: 1000, transition: 

Fx.Transitions.sineInOut});

myFxs.start({

'height': [10, 100], 'width': [900, 300]

  });

   

另外，除了上面的两个类之外，还有一个可以用来作转换效果的类：Fx.Elements，这个类可以按照指定的元素顺序来执行指定的效果，就像这样：

var myElementsEffects = new Fx.Elements($$('a'));

myElementsEffects.start({

     '0': {  //对第一个元素执行opacity和width的过渡变化

     'opacity': [0,1],

     width': [100,200]

     },

       '1': { //对第二个元素执行opacity过渡变换

        'opacity': [0.2, 0.5]

      }

  });