MooTools教程(15):滚动条(Slider)

作者佚名技术来源网页制作浏览发布时间 2012-03-07

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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 4 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: MooTools教程(14):定时器和Hash对象下一篇: getYear()函数问题(javascript教程)

关于MooTools教程(15):滚动条(Slider)的所有评论

随机推荐