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]

????? }

? });

轉載于:https://www.cnblogs.com/ziyiFly/archive/2008/09/11/1289262.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。