Mootools 1.2教程滑動效果（Slide）

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

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

基本用法
就像我們前面看過的所有類一樣，我們在把這個類應(yīng)用到一個元素上面時，我們要做的第一件事就是初始化一個新的Fx.Slide實例。
首先，讓我們?yōu)榛瑒釉亟⒁粋€HTML文件。
參考代碼：

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

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

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

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

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

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

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

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

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

slideVar.slideIn('horizontal');

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

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

slideElement.set('slide');

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

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

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

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

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

slideElement.slide('in');

.slide方法可以接受以下參數(shù)：
'in'
'out'
'toggle'
'show'
'hide'
每一個參數(shù)均和上面的方法相對應(yīng)。
代碼示例
上面所講的這些基本涵蓋了全部基本用法。下面的示例將使用我們上面學(xué)到的大部分知識，顯示一些不同的滑動元素，并提供一些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> 

接下來是CSS文件。我們讓它盡量保持簡單。
參考代碼：

復(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選項 
mode: 'horizontal', // 默認(rèn)是'vertical' 
//wrapper: this.element, // 默認(rèn)是this.element 
// Fx選項 
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選項 
mode: 'vertical', // 默認(rèn)是'vertical' 
// Fx選項 
// 注意：鏈?zhǔn)叫Ч梢宰屇愣啻吸c擊， 
// 當(dāng)鼠標(biāo)離開后， 
// 每次點擊的動畫可以依次觸發(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選項 
mode: 'vertical', // 默認(rèn)是'vertical' 
//wrapper: this.element, // 默認(rèn)是this.element 
// Fx選項 
//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選項 
//mode: 'vertical', // 默認(rèn)是'vertical' 
wrapper: slideWrap // 默認(rèn)是this.element 
}).hide(); 
$('openE').addEvent('click', function(){ 
slideVarE.toggle(); 
}); 
}); 