|
|
就像我們前面看過的所有類一樣，我們在把這個(gè)類應(yīng)用到一個(gè)元素上面時(shí)，我們要做的第一件事就是初始化一個(gè)新的Fx.Slide實(shí)例。
首先，讓我們?yōu)榛瑒釉亟⒁粋€(gè)HTML文件。
參考代碼：
復(fù)制代碼 代碼如下:
<div id="slide_element" class="slide">這里是要滑動顯示的內(nèi)容。</div>
我們的CSS也不需要任何修飾。
參考代碼：
復(fù)制代碼 代碼如下:
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
最后，我們來初始化一個(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)和事件，不過Fx.Slide也有一些自己的選項(xiàng)。
Fx.Slide選項(xiàng)
Fx.Slide只有兩個(gè)選項(xiàng)――“mode”和“wrapper”。坦白地說，我從來沒有發(fā)現(xiàn)我自己使用過“wrapper”（我從來沒有遇到過這種需求），不過“mode”決定了你是希望水平滑動還是垂直滑動。
mode（模式）
模式給了你兩個(gè)選擇――“垂直”或者“水平”。垂直是從頂部到底部的顯示，水平是從左邊到右邊的顯示。這里沒有從底部到頂部或從右邊到左邊的選項(xiàng)。不過我知道修改類本身來實(shí)現(xiàn)這些功能是相對簡單的。在我看來，我還是希望這能成為一個(gè)標(biāo)準(zhǔn)的選項(xiàng)，如果有人已經(jīng)修改了這個(gè)類并允許這些選項(xiàng)，請給我們留言。
wrapper（包裝器）
在缺省情況下，F(xiàn)x.Slide會在你的滑動元素的外面添加一個(gè)包裝器，并指定其“overflow”屬性的值為“hidden”。wrapper允許你設(shè)置其他元素作為該元素的包裝器。就像我上面所說的，我不清楚它在那里會被用到，我也有興趣聽到任何關(guān)于這個(gè)東西的想法。（感謝mooforum.NET的horseweapon讓我明白這個(gè)一點(diǎn)。）
Fx.Slide的方法
Fx.Slide也提供了許多方法來顯示或者隱藏元素。
.slideIn()
正如名字所告訴你的，該方法講觸發(fā)start（開始）時(shí)間并顯示你的元素。
.slideOut()
滑動元素到隱藏狀態(tài)。
.toggle()
這個(gè)方法有可能顯示或者隱藏元素，結(jié)果完全取決于這個(gè)元素的當(dāng)前狀態(tài)。用于點(diǎn)擊事件時(shí)非常有用。
.hide()
這將隱藏元素，但不使用滑動效果。
.show()
這將顯示元素，但不使用滑動效果。
通過方法重新設(shè)置模式選項(xiàng)
上面的每個(gè)方法均可以接受一個(gè)可選的mode參數(shù)，允許你覆蓋之前設(shè)置的選項(xiàng)。
參考代碼：
復(fù)制代碼 代碼如下:
slideVar.slideIn('horizontal');
Fx.Slide快捷方式
Fx.Slide類還提供了一些非常方便的快捷方式來給元素添加滑動效果。
.set('slide');
你可以不用初始化一個(gè)新類，而通過set方法來給元素添加一個(gè)slide對象來創(chuàng)建一個(gè)新的slide實(shí)例。
參考代碼：
復(fù)制代碼 代碼如下:
slideElement.set('slide');
設(shè)置選項(xiàng)
甚至你還可以通過快捷方式設(shè)置選項(xiàng)：
參考代碼：
復(fù)制代碼 代碼如下:
slideElement.set('slide', {duration: 1250});
.slide()
一旦用.set()方法設(shè)置了slide，你就可以用.slide()方法來初始化它。
參考代碼：復(fù)制代碼 代碼如下:
slideElement.slide('in');
.slide方法可以接受以下參數(shù)：
'in'
'out'
'toggle'
'show'
'hide'
每一個(gè)參數(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選項(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)離開后，
// 每次點(diǎn)擊的動畫可以依次觸發(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();
});
});
學(xué)習(xí)更多……
Fx.Slide是一個(gè)多功能，非常有用的插件。要學(xué)習(xí)更多，查看Fx.Slide文檔，F(xiàn)x.Morph和Fx文檔。
另外，也一定要閱讀一下我們關(guān)于Fx.Morph和Fx選項(xiàng)和事件的教程。
下載最后示例代碼的zip壓縮文件
包含你開始所需要的所有東西。
JavaScript技術(shù)：Mootools 1.2教程 滑動效果（Slide），轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
