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

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包 （44.66 KB）

asp之家下载地址：mootorial_day15_sliders.zip （44.66 KB）

包括MooTools 1.2的核心库和扩展库，还有一个外部的JavaScript文件，一个简单的HTML页面和一个CSS文件和上面的示例。