到現在為止，初始化這些mootools插件對象就會開始變得越來越熟悉。滾動條（slider）沒有任何不同，你要創建一個新的滾動條，定義滾動條和滑塊相關的元素，然后設置你的選項，再創建一些回調事件的控制函數。盡管滾動條（slider）遵循這個熟悉的模式，但是任然還有一點特殊的地方。
基本用法
創建一個新的滾動條（slider）對象
我們首先從html和css開始。基本的想法是創建一個滾動條的div，因此是一個長的長方形（長度取決于我們用滾動條做什么），還有一個子元素作為滑塊。
參考代碼： [復制代碼] [保存代碼]
- <div id="slider"><div id="knob"></div></div>
我們的css也可以這么簡單。只需要設置寬、高，還有背景顏色。
參考代碼： [復制代碼] [保存代碼]
- #slider {
- width: 200px
- height: 20px
- background-color: #0099ff
- }
-
- #knob {
- width: 20px
- height: 20px
- background-color: #993333
- }
現在，我們可以創建我們的新滾動條對象了。要初始化滾動條，首先要把你的相關元素賦值給一些變量，然后使用“new”來創建一個滾動條slider對象，這和我們以前創建tween、morph和drag.move時一樣：
參考代碼： [復制代碼] [保存代碼]
- var sliderobject = $('slider');
- var knobobject = $('knob');
-
- var sliderobject = new slider(sliderobject , knobobject , {
-
-
- range: [0, 10],
- snap: true,
- steps: 10,
- offset: 0,
- wheel: true,
- mode: 'horizontal',
-
-
- onchange: function(step){
-
-
- },
-
-
- ontick: function(pos){
-
-
- this.knob.setstyle('left', pos);
- },
-
- oncomplete: function(step){
-
-
- }
- });
slider的選項
snap：（默認為false），可以是一個true或者false值。這決定了滑塊是不是以最小單元格移動
offset：（默認是0），這是滑塊相對于開始的位置。你可以對此做一個試驗。
range：（默認是false），這是一個非常有用的選項。你可以設置一個數字范圍，會依照此數字和你的步數（step）觸發onchange事件。例如：如果你設置的范圍是[0, 200]，而且你設置的step值為10，那么每次onchange的step的值將是20。這個范圍也是是負數，例如[-10,0]，這個數字在做反向的滾動條時會非常有用（下面有示例）。
wheel：（默認是false），如果設置這個參數為true，這個滾動條將會識別鼠標滾輪事件。當使用鼠標滾輪時，你肯恩需要調整range參數，以保證鼠標滾輪事件的行為不是相反的（同樣，后面會有例子）。
steps：（默認是100），默認值為100非常有用，因為它可以很容易地作為百分比使用。當然，你也可以以你的理由設置任意多步（這是可以的）。
mode：（默認是“horizontal”），這個參數定義了滾動條是水平滾動還是垂直滾動。當然了，要從水平滾動轉化為垂直滾動還需要一些其它步驟。
回調事件
onchange：當step改變時，觸發這個事件。同時傳遞參數“step”。可以從下面的例子中看到它是什么時候觸發的。
ontick：當控制點的位置發生改變時觸發這個事件。同時傳遞參數“position”。可以從下面的例子中看到它是什么時候觸發的。
oncomplete：當控制點釋放時觸發這個事件。捅死傳遞參數“step”。可以從下面的例子中看到它是什么時候觸發的。
代碼示例
讓我們建立一個示例，以便看看它們的效果。
.set();方法：看一看按鈕上的事件，看是怎么使用.set()方法的。它使用起來非常簡單：調用slider對象，附加.set，然后是你想要滾動的步數（step）。
參考代碼： [復制代碼] [保存代碼]
- window.addevent('domready', function() {
- var sliderobject = new slider('slider', 'knob', {
-
- range: [0, 10],
- snap: false,
- steps: 10,
- offset: 0,
- wheel: true,
- mode: 'horizontal',
-
-
- onchange: function(step){
- $('change').highlight('#f3f825');
- $('steps_number').set('html', step);
- },
- ontick: function(pos){
- $('tick').highlight('#f3f825');
- $('knob_pos').set('html', pos);
-
- 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){
-
- this.knob.setstyle('top', pos);
- },
- onchange: function(step){
- $('stepsv_number').set('html', step*-1);
- }
- });
-
- sliderobjectv.set(0);
-
- $('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:
0
注意在垂直滾動的例子中，我們不僅僅只是把“mode”改成了“vertical”，我們還改變了ontick事件中的.setstyle();方法中的“left”屬性為“top”屬性。另外，看一下我們是怎樣設置“range”從-10開始，然后到0的。然后，我們在onchange事件中顯示當前的數字，我們把這個值乘了-1，正好和位置相反。這完成了兩件事情：一是讓我們從10到0改變這個值，0在最底部。但是這個可能設置rang為從10到0，從而導致鼠標滾輪事件變得相反。這就是我們的第二個原因——鼠標滾輪讀取值，而不是你要控制的方向，因此要讓鼠標滾輪正確地讀取滾動條并且從底部的0開始的值的唯一方式就是做這一點點改變。
注意：至于ontick事件中“top”和“left”的使用，我不確定這是不是mootools中的“規則”。這只是我讓它們正確運行的一種方法，我很有興趣聽到一些其他的清楚的說法。
更多學習
和以前一樣，請參考文檔中的sliders一節。
下載一個包含你開始所需要的所有東西的zip包
包括mootools 1.2的核心庫和擴展庫，還有一個外部的javascript文件，一個簡單的html頁面和一個css文件和上面的示例。
