Mootools 1.2教程(15)——滚动条（Slider）

原文地址：30 Days of Mootools 1.2 Tutorials - Day 15 - Sliders

MooTools 1.2的滚动条（Slider）

阅读上一讲：Mootools 1.2教程(14)——定时器和哈希简介

到现在为止，初始化这些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 
    }