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

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

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

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

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

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

});

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

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

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

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

????});

?

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

window的擴(kuò)展方法：

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

視野高度)

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

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

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

getScrollLeft：獲取window滾動(dòng)的水平偏移量

getScrollTop：獲取window滾動(dòng)的垂直偏移量

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

{

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

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

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

}

二.?多彩的開(kāi)始1

????mootools中集成了一些非常好用的界面組件，?也提供了非常好用的界面效果工具類(lèi)。

????mootools的界面庫(kù)Moo.Fx的設(shè)計(jì)十分的講究OO原則，通過(guò)對(duì)提供了基本功能的基類(lèi)的繼承，擴(kuò)展出了不同功能的工具類(lèi)和組件類(lèi)。Fx.Base就是這樣一個(gè)基礎(chǔ)類(lèi)，它本身實(shí)現(xiàn)了Events,Chain,Options三個(gè)類(lèi)，它包含了界面效果的最基本的動(dòng)作和屬性：

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

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

的function。

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

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

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

Fx.Transitions.sineInOut(即正弦)

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

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

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

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

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

方法：

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

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

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

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

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

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

三.?多彩的開(kāi)始2?

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

????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)用這個(gè) 方法的效果是隱藏元素。

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

? myFx.hide();

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

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

{duration:500});

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

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

????由于Fx.Style的引入，Element又被擴(kuò)展了一個(gè)實(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)行多個(gè)效果怎么做？Fx.Styles就是提供這樣功能的一個(gè)類(lèi)，它也是直接繼承了Fx.Base的類(lèi)，可以像這樣來(lái)使用它：

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

? myFx.start({

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

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

? });

同樣，Effect由此多了一個(gè)effects快捷方法，可以這樣使用：

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

Fx.Transitions.sineInOut});

myFxs.start({

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

? });

???

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

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

myElementsEffects.start({

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

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

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

???? },

???????'1':?{?//對(duì)第二個(gè)元素執(zhí)行opacity過(guò)渡變換

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

????? }

? });

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

總結(jié)

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

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