Mootools 1.2教程滑動(dòng)效果（Slide）

更新時(shí)間：2009年09月15日 22:57:28 作者：

今天繼續(xù)我們的Mootools 1.2教程的第23課，我們今天來(lái)講一下Fx插件中的Fx.Slide。通過(guò)該插件，可以讓你把內(nèi)容以滑動(dòng)的方式顯示出來(lái)。它使用起來(lái)非常簡(jiǎn)單，是你UI工具箱中一個(gè)很好的工具。

基本用法
就像我們前面看過(guò)的所有類一樣，我們?cè)诎堰@個(gè)類應(yīng)用到一個(gè)元素上面時(shí)，我們要做的第一件事就是初始化一個(gè)新的Fx.Slide實(shí)例。
首先，讓我們?yōu)榛瑒?dòng)元素建立一個(gè)HTML文件。
參考代碼：

復(fù)制代碼代碼如下:

 
<div id="slide_element" class="slide">這里是要滑動(dòng)顯示的內(nèi)容。</div> 

我們的CSS也不需要任何修飾。
參考代碼：

復(fù)制代碼代碼如下:

 
.slide { 
margin: 20px 0; 
padding: 10px; 
width: 200px; 
background-color: #DAF7B4; 
} 

最后，我們來(lái)初始化一個(gè)新的Fx.Slide并給它傳遞我們的元素變量。
參考代碼：

復(fù)制代碼代碼如下:

 
var slideElement = $('slide_element'); 
var slideVar = new Fx.Slide(slideElement, { 
// Fx.Slide選項(xiàng) 
mode: 'vertical', // 默認(rèn)是'vertical'（垂直） 
// Fx選項(xiàng) 
transition: 'sine:in', 
duration: 300, 
// Fx事件 
onStart: function(){ 
$('start').highlight("#EBCC22"); 
} 
}); 

由于Fx.Slide是Fx的一個(gè)擴(kuò)展，因此你可以使用Fx的任何選項(xiàng)和事件，不過(guò)Fx.Slide也有一些自己的選項(xiàng)。
Fx.Slide選項(xiàng)
Fx.Slide只有兩個(gè)選項(xiàng)——“mode”和“wrapper”。坦白地說(shuō)，我從來(lái)沒(méi)有發(fā)現(xiàn)我自己使用過(guò)“wrapper”（我從來(lái)沒(méi)有遇到過(guò)這種需求），不過(guò)“mode”決定了你是希望水平滑動(dòng)還是垂直滑動(dòng)。
mode（模式）
模式給了你兩個(gè)選擇——“垂直”或者“水平”。垂直是從頂部到底部的顯示，水平是從左邊到右邊的顯示。這里沒(méi)有從底部到頂部或從右邊到左邊的選項(xiàng)。不過(guò)我知道修改類本身來(lái)實(shí)現(xiàn)這些功能是相對(duì)簡(jiǎn)單的。在我看來(lái)，我還是希望這能成為一個(gè)標(biāo)準(zhǔn)的選項(xiàng)，如果有人已經(jīng)修改了這個(gè)類并允許這些選項(xiàng)，請(qǐng)給我們留言。
wrapper（包裝器）
在缺省情況下，F(xiàn)x.Slide會(huì)在你的滑動(dòng)元素的外面添加一個(gè)包裝器，并指定其“overflow”屬性的值為“hidden”。wrapper允許你設(shè)置其他元素作為該元素的包裝器。就像我上面所說(shuō)的，我不清楚它在那里會(huì)被用到，我也有興趣聽(tīng)到任何關(guān)于這個(gè)東西的想法。（感謝mooforum.net的horseweapon讓我明白這個(gè)一點(diǎn)。）
Fx.Slide的方法
Fx.Slide也提供了許多方法來(lái)顯示或者隱藏元素。
.slideIn()
正如名字所告訴你的，該方法講觸發(fā)start（開(kāi)始）時(shí)間并顯示你的元素。
.slideOut()
滑動(dòng)元素到隱藏狀態(tài)。
.toggle()
這個(gè)方法有可能顯示或者隱藏元素，結(jié)果完全取決于這個(gè)元素的當(dāng)前狀態(tài)。用于點(diǎn)擊事件時(shí)非常有用。
.hide()
這將隱藏元素，但不使用滑動(dòng)效果。
.show()
這將顯示元素，但不使用滑動(dòng)效果。
通過(guò)方法重新設(shè)置模式選項(xiàng)
上面的每個(gè)方法均可以接受一個(gè)可選的mode參數(shù)，允許你覆蓋之前設(shè)置的選項(xiàng)。
參考代碼：

復(fù)制代碼代碼如下:

slideVar.slideIn('horizontal');

Fx.Slide快捷方式
Fx.Slide類還提供了一些非常方便的快捷方式來(lái)給元素添加滑動(dòng)效果。
.set('slide');
你可以不用初始化一個(gè)新類，而通過(guò)set方法來(lái)給元素添加一個(gè)slide對(duì)象來(lái)創(chuàng)建一個(gè)新的slide實(shí)例。
參考代碼：

復(fù)制代碼代碼如下:

slideElement.set('slide');

設(shè)置選項(xiàng)
甚至你還可以通過(guò)快捷方式設(shè)置選項(xiàng)：
參考代碼：

復(fù)制代碼代碼如下:

slideElement.set('slide', {duration: 1250});

.slide()
一旦用.set()方法設(shè)置了slide，你就可以用.slide()方法來(lái)初始化它。
參考代碼：

復(fù)制代碼代碼如下:

slideElement.slide('in');

.slide方法可以接受以下參數(shù)：
'in'
'out'
'toggle'
'show'
'hide'
每一個(gè)參數(shù)均和上面的方法相對(duì)應(yīng)。
代碼示例
上面所講的這些基本涵蓋了全部基本用法。下面的示例將使用我們上面學(xué)到的大部分知識(shí)，顯示一些不同的滑動(dòng)元素，并提供一些div作為指示器，以便你可以清楚地看到這些事件。
首先，創(chuàng)建HTML文件。
參考代碼：

復(fù)制代碼代碼如下:

 
<div id="start" class="ind">Start</div> 
<div id="cancel" class="ind">Cancel</div> 
<div id="complete" class="ind">Complete</div> 
<br /><br /> 
<button id="openA">open A</button> 
<button id="closeA">close A</button> 
<div id="slideA" class="slide">Here is some content - A. Notice the delay before onComplete fires. This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.</div> 
<button id="openB">open B</button> 
<button id="closeB">close B</button> 
<div id="slideB" class="slide">Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events. This slide is set up with the option "link: 'chain'"</div> 
<button id="openC">toggle C</button> 
<div id="slideC" class="slide">Here is some content - C</div> 
<button id="openD">toggle D</button> 
<div id="slideD" class="slide">Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.</div> 
<button id="openE">toggle E</button> 
<div id="slide_wrap"> 
<div id="slideE" class="slide">Here is some content - E</div> 
</div> 

接下來(lái)是CSS文件。我們讓它盡量保持簡(jiǎn)單。
參考代碼：

復(fù)制代碼代碼如下:

 
.ind { 
width: 200px; 
padding: 10px; 
background-color: #87AEE1; 
font-weight: bold; 
border-bottom: 1px solid white; 
} 
.slide { 
margin: 20px 0; 
padding: 10px; 
width: 200px; 
background-color: #DAF7B4; 
} 
#slide_wrap { 
padding: 30px; 
background-color: #D47000; 
} 

最后，是我們的Mootools JavaScript代碼：
參考代碼：

復(fù)制代碼代碼如下:

 
window.addEvent('domready', function() { 
// 示例A 
var slideElement = $('slideA'); 
var slideVar = new Fx.Slide(slideElement, { 
// Fx.Slide選項(xiàng) 
mode: 'horizontal', // 默認(rèn)是'vertical' 
//wrapper: this.element, // 默認(rèn)是this.element 
// Fx選項(xiàng) 
link: 'cancel', 
transition: 'elastic:out', 
duration: 'long', 
// Fx事件 
onStart: function(){ 
$('start').highlight("#EBCC22"); 
}, 
onCancel: function(){ 
$('cancel').highlight("#EBCC22"); 
}, 
onComplete: function(){ 
$('complete').highlight("#EBCC22"); 
} 
}).hide().show().hide(); // 注意，.hide和.show方法并不觸發(fā)事件 
$('openA').addEvent('click', function(){ 
slideVar.slideIn(); 
}); 
$('closeA').addEvent('click', function(){ 
slideVar.slideOut(); 
}); 
// 示例B 
var slideElementB = $('slideB'); 
var slideVarB = new Fx.Slide(slideElementB, { 
// Fx.Slide選項(xiàng) 
mode: 'vertical', // 默認(rèn)是'vertical' 
// Fx選項(xiàng) 
// 注意：鏈?zhǔn)叫Ч梢宰屇愣啻吸c(diǎn)擊， 
// 當(dāng)鼠標(biāo)離開(kāi)后， 
// 每次點(diǎn)擊的動(dòng)畫(huà)可以依次觸發(fā) 
link: 'chain', 
// Fx事件 
onStart: function(){ 
$('start').highlight("#EBCC22"); 
}, 
onCancel: function(){ 
$('cancel').highlight("#EBCC22"); 
}, 
onComplete: function(){ 
$('complete').highlight("#EBCC22"); 
} 
}); 
$('openB').addEvent('click', function(){ 
slideVarB.slideIn(); 
}); 
$('closeB').addEvent('click', function(){ 
slideVarB.slideOut(); 
}); 
// 示例 C 
var slideElementC = $('slideC'); 
var slideVarC = new Fx.Slide(slideElementC, { 
// Fx.Slide選項(xiàng) 
mode: 'vertical', // 默認(rèn)是'vertical' 
//wrapper: this.element, // 默認(rèn)是this.element 
// Fx選項(xiàng) 
//link: 'cancel', 
transition: 'sine:in', 
duration: 300, 
// Fx事件 
onStart: function(){ 
$('start').highlight("#EBCC22"); 
}, 
onCancel: function(){ 
$('cancel').highlight("#EBCC22"); 
}, 
onComplete: function(){ 
$('complete').highlight("#EBCC22"); 
} 
}).hide(); 
$('openC').addEvent('click', function(){ 
slideVarC.toggle(); 
}); 
$('slideD').slide('hide'); 
$('openD').addEvent('click', function(){ 
$('slideD').slide('toggle'); 
}); 
// 示例C 
var slideElementE = $('slideE'); 
var slideWrap = $('slide_wrap'); 
var slideVarE = new Fx.Slide(slideElementE, { 
// Fx.Slide選項(xiàng) 
//mode: 'vertical', // 默認(rèn)是'vertical' 
wrapper: slideWrap // 默認(rèn)是this.element 
}).hide(); 
$('openE').addEvent('click', function(){ 
slideVarE.toggle(); 
}); 
}); 