快捷導(dǎo)航

Mootools 1.2教程滾動條（Slider）

更新時間：2009年09月15日 22:04:34 作者：

到現(xiàn)在為止，初始化這些MooTools插件對象就會開始變得越來越熟悉。滾動條（Slider）沒有任何不同，你要創(chuàng)建一個新的滾動條，定義滾動條和滑塊相關(guān)的元素，然后設(shè)置你的選項(xiàng)，再創(chuàng)建一些回調(diào)事件的控制函數(shù)。

盡管滾動條（Slider）遵循這個熟悉的模式，但是任然還有一點(diǎn)特殊的地方。
基本用法
創(chuàng)建一個新的滾動條（Slider）對象
我們首先從HTML和CSS開始。基本的想法是創(chuàng)建一個滾動條的div，因此是一個長的長方形（長度取決于我們用滾動條做什么），還有一個子元素作為滑塊。
參考代碼：

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

我們的CSS也可以這么簡單。只需要設(shè)置寬、高，還有背景顏色。
參考代碼：

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

 
#slider { 
width: 200px 
height: 20px 
background-color: #0099FF 
} 
#knob { 
width: 20px 
height: 20px 
background-color: #993333 
} 

現(xiàn)在，我們可以創(chuàng)建我們的新滾動條對象了。要初始化滾動條，首先要把你的相關(guān)元素賦值給一些變量，然后使用“new”來創(chuàng)建一個滾動條Slider對象，這和我們以前創(chuàng)建tween、morph和drag.move時一樣：
參考代碼：

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

 
// 把元素賦值給變量 
var sliderObject = $('slider'); 
var knobObject = $('knob'); 
// 創(chuàng)建一個新的slider對象 
// 首先定義slider元素 
// 然后定義滑塊元素 
var SliderObject = new Slider(sliderObject , knobObject , { 
// 這里是你的選項(xiàng) 
// 稍后我們會仔細(xì)講一下這些選項(xiàng) 
range: [0, 10], 
snap: true, 
steps: 10, 
offset: 0, 
wheel: true, 
mode: 'horizontal', 
// 當(dāng)step的值改變時將觸發(fā)onchange事件 
// 它會把當(dāng)前的step作為參數(shù)傳入 
onChange: function(step){ 
// 在這里放置onchange時要執(zhí)行的代碼 
// 你可以引用step 
}, 
// 當(dāng)用戶拖動滑塊時觸發(fā)ontick事件 
// 它會傳遞當(dāng)前的位置（相對于父元素的位置） 
onTick: function(pos){ 
// 這是必需的，用以調(diào)整滑塊的位置 
// 我們會在下面詳細(xì)解釋這個 
this.knob.setStyle('left', pos); 
}, 
// 當(dāng)拖動停止時觸發(fā) 
onComplete: function(step){ 
// 當(dāng)完成時要執(zhí)行的代碼 
// 你可以引用step 
} 
}); 

Slider的選項(xiàng)
Snap：（默認(rèn)為false），可以是一個true或者false值。這決定了滑塊是不是以最小單元格移動
Offset：（默認(rèn)是0），這是滑塊相對于開始的位置。你可以對此做一個試驗(yàn)。
Range：（默認(rèn)是false），這是一個非常有用的選項(xiàng)。你可以設(shè)置一個數(shù)字范圍，會依照此數(shù)字和你的步數(shù)（step）觸發(fā)onchange事件。例如：如果你設(shè)置的范圍是[0, 200]，而且你設(shè)置的step值為10，那么每次onchange的step的值將是20。這個范圍也是是負(fù)數(shù)，例如[-10,0]，這個數(shù)字在做反向的滾動條時會非常有用（下面有示例）。
Wheel：（默認(rèn)是false），如果設(shè)置這個參數(shù)為true，這個滾動條將會識別鼠標(biāo)滾輪事件。當(dāng)使用鼠標(biāo)滾輪時，你肯恩需要調(diào)整range參數(shù)，以保證鼠標(biāo)滾輪事件的行為不是相反的（同樣，后面會有例子）。
Steps：（默認(rèn)是100），默認(rèn)值為100非常有用，因?yàn)樗梢院苋菀椎刈鳛榘俜直仁褂?。?dāng)然，你也可以以你的理由設(shè)置任意多步（這是可以的）。
Mode：（默認(rèn)是“horizontal”），這個參數(shù)定義了滾動條是水平滾動還是垂直滾動。當(dāng)然了，要從水平滾動轉(zhuǎn)化為垂直滾動還需要一些其它步驟。
回調(diào)事件
onChange：當(dāng)step改變時，觸發(fā)這個事件。同時傳遞參數(shù)“step”?？梢詮南旅娴睦又锌吹剿鞘裁磿r候觸發(fā)的。
onTick：當(dāng)控制點(diǎn)的位置發(fā)生改變時觸發(fā)這個事件。同時傳遞參數(shù)“position”?？梢詮南旅娴睦又锌吹剿鞘裁磿r候觸發(fā)的。
onComplete：當(dāng)控制點(diǎn)釋放時觸發(fā)這個事件。捅死傳遞參數(shù)“step”?？梢詮南旅娴睦又锌吹剿鞘裁磿r候觸發(fā)的。
代碼示例
讓我們建立一個示例，以便看看它們的效果。
.set();方法：看一看按鈕上的事件，看是怎么使用.set()方法的。它使用起來非常簡單：調(diào)用slider對象，附加.set，然后是你想要滾動的步數(shù)（step）。
參考代碼：

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

 
window.addEvent('domready', function() { 
var SliderObject = new Slider('slider', 'knob', { 
// 選項(xiàng) 
range: [0, 10], 
snap: false, 
steps: 10, 
offset: 0, 
wheel: true, 
mode: 'horizontal', 
// 回調(diào)事件 
onChange: function(step){ 
$('change').highlight('#F3F825'); 
$('steps_number').set('html', step); 
}, 
onTick: function(pos){ 
$('tick').highlight('#F3F825'); 
$('knob_pos').set('html', pos); 
// 這一行是必需的（水平滾動使用left） 
this.knob.setStyle('left', pos); 
}, 
onComplete: function(step){ 
$('complete').highlight('#F3F825') 
$('steps_complete_number').set('html', step); 
this.set(step); 
} 
}); 
var SliderObjectV = new Slider('sliderv', 'knobv', { 
range: [-10, 0], 
snap: true, 
steps: 10, 
offset: 0, 
wheel: true, 
mode: 'vertical', 
onTick: function(pos){ 
// 這一行是必需的（垂直滾動使用top） 
this.knob.setStyle('top', pos); 
}, 
onChange: function(step){ 
$('stepsV_number').set('html', step*-1); 
} 
}); 
// 設(shè)置垂直滾動的從0開始 
// 否則的話是從頂部開始 
SliderObjectV.set(0); 
// 設(shè)置滾動條從7開始 
$('set_knob').addEvent('click', function(){ SliderObject.set(7)}); 
}); 

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