Menu

30天學會 MooTools 教學(15): 滾動條(Slider)

到現在為止，初始化這些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');
 
// 創建一個新的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)});
 
});
注意在垂直滾動的例子中，我們不僅僅只是把「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文件和上面的示例。

 

Mootools 教學列表：