|
|
基本用法
創建一個新的滾動條（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');
// 創建一個新的slider對象
// 首先定義slider元素
// 然后定義滑塊元素
var SliderObject = new Slider(sliderObject , knobObject , {
// 這里是你的選項
// 稍后我們會仔細講一下這些選項
range: [0, 10],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
// 當step的值改變時將觸發onchange事件
// 它會把當前的step作為參數傳入
onChange: function(step){
// 在這里放置onchange時要執行的代碼
// 你可以引用step
},
// 當用戶拖動滑塊時觸發ontick事件
// 它會傳遞當前的位置（相對于父元素的位置）
onTick: function(pos){
// 這是必需的，用以調整滑塊的位置
// 我們會在下面詳細解釋這個
this.knob.setStyle('left', pos);
},
// 當拖動停止時觸發
onComplete: function(step){
// 當完成時要執行的代碼
// 你可以引用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);
// 這一行是必需的（水平滾動使用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);
}
});
// 設置垂直滾動的從0開始
// 否則的話是從頂部開始
SliderObjectV.set(0);
// 設置滾動條從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();方法中的“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文件和上面的示例。
JavaScript技術：Mootools 1.2教程 滾動條（Slider），轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
