软件开发培训班 >> 编程开发 >> JavaScript


Mootools 1.2教程 滚动条（Slider）

　　本文标签：Mootools,滚动条

尽管滚动条（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)});
});

onChange
passes the step you are on: onTick
passes the knob position: onComplete
passes the current step:
注意在垂直滚动的例子中，我们不仅仅只是把“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文件和上面的示例 。