到现在为止，初始化这些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文件和上面的示例。
