mootools【十】-?window的擴(kuò)展及多彩世界

一.?Mootools?框架對?Window的擴(kuò)展:?

????瀏覽器的window對象本身就提供了我們很多的對瀏覽器本身屬性的獲取或設(shè)置的方法，但是我們也知道，由于各大瀏覽器之間對標(biāo)準(zhǔn)的實(shí)現(xiàn)不統(tǒng)一，導(dǎo)致很多方法功能上有所出入，mootools為我們統(tǒng)一了我們最常用的一些方法：

????mootools的Window.Base.js里面，主要實(shí)現(xiàn)了對DOM樹創(chuàng)建完成的事件監(jiān)聽。以前，我們可能經(jīng)常把javascript代碼寫在html代碼的最后面獲者加上defer屬性，以保證javascript代碼要操作的html先于javascript代碼裝載(如果不是這樣的話，javascript將獲取不到目標(biāo)元素而出錯)，但是，這種方式看起來還是太雜亂，保險(xiǎn)系數(shù)也不是最高的。其實(shí)像ie的話可以根據(jù)document的readyState屬性來判斷文檔樹的建立狀態(tài)，而有些瀏覽器在創(chuàng)建文檔樹之后會觸發(fā)onload事件，mootools把這些都包裝了起來，形成一個統(tǒng)一的自定義事件"domready"，你可以像添加其他監(jiān)聽器一樣來為window添加這個domready事件的監(jiān)聽器方法：

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

????????alert('the?dom?is?ready');

});

備注:?---這就是為什么只要用到?mootools框架的地方總是以給頁面添加事件:?window.addEvent('domready',?function(){?//操作內(nèi)容...}開始的原因.?這樣這可保證javascript代碼要操作的html先于javascript代碼裝載(如果不是這樣的話，javascript將獲取不到目標(biāo)元素而出錯)

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

????window.onDomReady(function(e){

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

????});

?

????mootools的Window.Size.js提供了一系列和瀏覽器window的尺寸有關(guān)的工具方法。

window的擴(kuò)展方法：

getWidth?：獲取window的當(dāng)前高度(不包含滾動條的滾動量，即當(dāng)前能見

視野高度)

getHeight：獲取window的當(dāng)前寬度(不包含滾動條的滾動量，即當(dāng)前能見 視野寬度)

getScrollWidth：獲取window的當(dāng)前高度(包含了整個內(nèi)容區(qū)域，即可滾動 部分也計(jì)算在內(nèi))

getScrollHeight：獲取window的當(dāng)前寬度(包含了整個內(nèi)容區(qū)域，即可滾動 部分也計(jì)算在內(nèi))

getScrollLeft：獲取window滾動的水平偏移量

getScrollTop：獲取window滾動的垂直偏移量

getSize：獲取window上面幾個方法的提供的數(shù)據(jù)，格式：

{

??? '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的設(shè)計(jì)十分的講究OO原則，通過對提供了基本功能的基類的繼承，擴(kuò)展出了不同功能的工具類和組件類。Fx.Base就是這樣一個基礎(chǔ)類，它本身實(shí)現(xiàn)了Events,Chain,Options三個類，它包含了界面效果的最基本的動作和屬性：

構(gòu)造方法的可選屬性：

onStart：效果開始前執(zhí)行的方法，默認(rèn)是一個空的function。你可以指定你

的function。

onComplete：完成效果后執(zhí)行的方法，默認(rèn)是一個空的function。你可以指 定你的function。

onCancel：中斷效果后執(zhí)行的方法，默認(rèn)是一個空的function。你可以指定 你的function。

transition：效果的過渡變換所使用的方程，用來描述效果的變化規(guī)律。你可 以在Fx.Transitions類中找到其他的方程，默認(rèn)使用的是

Fx.Transitions.sineInOut(即正弦)

duration：變化頻率，毫秒。默認(rèn)為500。

unit：變化量的單位。默認(rèn)是'px',你可以指定如'em','%'之類。

wait?：true/false。指定在執(zhí)行下一個過渡效果之前是否等待當(dāng)前的過渡效果

執(zhí)行結(jié)束。默認(rèn)為true

fps：幀頻。即每秒所執(zhí)行的變換次數(shù)。默認(rèn)為30幀/秒。

方法：

set：不經(jīng)過過渡變換效果，直接設(shè)置為指定的值

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

start：執(zhí)行效果，讓指定的開始值過渡變換到指定的結(jié)束值

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

stop：中斷效果的執(zhí)行，如果指定了參數(shù)為false,則會執(zhí)行onCancel指定的 方法。

最后，如果要查看有哪些變換方程可以選用，可以看Fx.Transitions.js里的Fx.Transitions類，里面提供了非常之多的變換方程，具體的效果差別，自己去一個個去試試看吧。

三.?多彩的開始2?

????Fx.Base類，它是mootools效果庫Fx的基礎(chǔ)，而平時(shí)會使用最頻繁的，就是Fx.Style類，它是直接繼承了Fx.Base類的。這個效果類非常強(qiáng)大，基本上可以實(shí)現(xiàn)對CSS樣式中任何一個屬性的過渡變換。

????Fx.Base中提供的方法在Fx.Style中都能用，用法是相同的，其他擴(kuò)展的方法如下：

方法：

hide：如同調(diào)用Fx.Base的set方法，并且參數(shù)為0（即set(0)）,當(dāng)效果作 用在opacity,或者width,height(overflow需要是hidden)的時(shí)候,調(diào)用這個 方法的效果是隱藏元素。

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

? myFx.hide();

start：在兩個區(qū)間之間進(jìn)行過渡變換，和Fx.Base的start用法一樣。

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

{duration:500});

marginChange.start(10);//從myElement當(dāng)前的margin-top值過渡到10

??? marginChange.start(1,20);?//myElement的margin-top值從1過渡到20

????由于Fx.Style的引入，Element又被擴(kuò)展了一個實(shí)現(xiàn)效果的快捷方法：?effect

具體用法如下：

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

Fx.Transitions.linear});

? myEffect.start(10,?100);

????想實(shí)現(xiàn)同時(shí)進(jìn)行多個效果怎么做？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]

? });

???

另外，除了上面的兩個類之外，還有一個可以用來作轉(zhuǎn)換效果的類：Fx.Elements，這個類可以按照指定的元素順序來執(zhí)行指定的效果，就像這樣：

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

myElementsEffects.start({

???? '0':?{??//對第一個元素執(zhí)行opacity和width的過渡變化

???? 'opacity':?[0,1],

???? width':?[100,200]

???? },

???????'1':?{?//對第二個元素執(zhí)行opacity過渡變換

??????? 'opacity':?[0.2,?0.5]

????? }

? });

轉(zhuǎn)載于:https://www.cnblogs.com/ziyiFly/archive/2008/09/11/1289262.html

總結(jié)

以上是生活随笔為你收集整理的mootools框架【十】-mootools深层探讨的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。