Mootools 1.2教程 滚动条（Slider）
2024-05-06 14:13:55
供稿：网友
尽管滚动条（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参数，以保证鼠标滚轮事件的行为不是相反的（同样，后面会有例子）。
