盡管滾動(dòng)條（Slider）遵循這個(gè)熟悉的模式，但是任然還有一點(diǎn)特殊的地方。
基本用法
創(chuàng)建一個(gè)新的滾動(dòng)條（Slider）對(duì)象
我們首先從HTML和CSS開(kāi)始。基本的想法是創(chuàng)建一個(gè)滾動(dòng)條的div，因此是一個(gè)長(zhǎng)的長(zhǎng)方形（長(zhǎng)度取決于我們用滾動(dòng)條做什么），還有一個(gè)子元素作為滑塊。
參考代碼：
我們的CSS也可以這么簡(jiǎn)單。只需要設(shè)置寬、高，還有背景顏色。
參考代碼：
現(xiàn)在，我們可以創(chuàng)建我們的新滾動(dòng)條對(duì)象了。要初始化滾動(dòng)條，首先要把你的相關(guān)元素賦值給一些變量，然后使用“new”來(lái)創(chuàng)建一個(gè)滾動(dòng)條Slider對(duì)象，這和我們以前創(chuàng)建tween、morph和drag.move時(shí)一樣：
參考代碼：
Slider的選項(xiàng)
Snap：（默認(rèn)為false），可以是一個(gè)true或者false值。這決定了滑塊是不是以最小單元格移動(dòng)
Offset：（默認(rèn)是0），這是滑塊相對(duì)于開(kāi)始的位置。你可以對(duì)此做一個(gè)試驗(yàn)。
Range：（默認(rèn)是false），這是一個(gè)非常有用的選項(xiàng)。你可以設(shè)置一個(gè)數(shù)字范圍，會(huì)依照此數(shù)字和你的步數(shù)（step）觸發(fā)onchange事件。例如：如果你設(shè)置的范圍是[0, 200]，而且你設(shè)置的step值為10，那么每次onchange的step的值將是20。這個(gè)范圍也是是負(fù)數(shù)，例如[-10,0]，這個(gè)數(shù)字在做反向的滾動(dòng)條時(shí)會(huì)非常有用（下面有示例）。
Wheel：（默認(rèn)是false），如果設(shè)置這個(gè)參數(shù)為true，這個(gè)滾動(dòng)條將會(huì)識(shí)別鼠標(biāo)滾輪事件。當(dāng)使用鼠標(biāo)滾輪時(shí)，你肯恩需要調(diào)整range參數(shù)，以保證鼠標(biāo)滾輪事件的行為不是相反的（同樣，后面會(huì)有例子）。
Steps：（默認(rèn)是100），默認(rèn)值為100非常有用，因?yàn)樗梢院苋菀椎刈鳛榘俜直仁褂?。?dāng)然，你也可以以你的理由設(shè)置任意多步（這是可以的）。
Mode：（默認(rèn)是“horizontal”），這個(gè)參數(shù)定義了滾動(dòng)條是水平滾動(dòng)還是垂直滾動(dòng)。當(dāng)然了，要從水平滾動(dòng)轉(zhuǎn)化為垂直滾動(dòng)還需要一些其它步驟。
回調(diào)事件
onChange：當(dāng)step改變時(shí)，觸發(fā)這個(gè)事件。同時(shí)傳遞參數(shù)“step”?？梢詮南旅娴睦又锌吹剿鞘裁磿r(shí)候觸發(fā)的。
onTick：當(dāng)控制點(diǎn)的位置發(fā)生改變時(shí)觸發(fā)這個(gè)事件。同時(shí)傳遞參數(shù)“position”?？梢詮南旅娴睦又锌吹剿鞘裁磿r(shí)候觸發(fā)的。
onComplete：當(dāng)控制點(diǎn)釋放時(shí)觸發(fā)這個(gè)事件。捅死傳遞參數(shù)“step”?？梢詮南旅娴睦又锌吹剿鞘裁磿r(shí)候觸發(fā)的。
代碼示例
讓我們建立一個(gè)示例，以便看看它們的效果。
.set();方法：看一看按鈕上的事件，看是怎么使用.set()方法的。它使用起來(lái)非常簡(jiǎn)單：調(diào)用slider對(duì)象，附加.set，然后是你想要滾動(dòng)的步數(shù)（step）。
參考代碼：

onChange
passes the step you are on: onTick
passes the knob position: onComplete
passes the current step:
注意在垂直滾動(dòng)的例子中，我們不僅僅只是把“mode”改成了“vertical”，我們還改變了onTick事件中的.setStyle();方法中的“l(fā)eft”屬性為“top”屬性。另外，看一下我們是怎樣設(shè)置“range”從-10開(kāi)始，然后到0的。然后，我們?cè)趏nChange事件中顯示當(dāng)前的數(shù)字，我們把這個(gè)值乘了-1，正好和位置相反。這完成了兩件事情：一是讓我們從10到0改變這個(gè)值，0在最底部。但是這個(gè)可能設(shè)置rang為從10到0，從而導(dǎo)致鼠標(biāo)滾輪事件變得相反。這就是我們的第二個(gè)原因——鼠標(biāo)滾輪讀取值，而不是你要控制的方向，因此要讓鼠標(biāo)滾輪正確地讀取滾動(dòng)條并且從底部的0開(kāi)始的值的唯一方式就是做這一點(diǎn)點(diǎn)改變。
注意：至于onTick事件中“top”和“l(fā)eft”的使用，我不確定這是不是MooTools中的“規(guī)則”。這只是我讓它們正確運(yùn)行的一種方法，我很有興趣聽(tīng)到一些其他的清楚的說(shuō)法。

更多學(xué)習(xí)

和以前一樣，請(qǐng)參考文檔中的sliders一節(jié)。

下載一個(gè)包含你開(kāi)始所需要的所有東西的zip包

包括MooTools 1.2的核心庫(kù)和擴(kuò)展庫(kù)，還有一個(gè)外部的JavaScript文件，一個(gè)簡(jiǎn)單的HTML頁(yè)面和一個(gè)CSS文件和上面的示例。

最新評(píng)論