Mootools 1.2教程 滚动条(Slider)


Posted in Javascript onSeptember 15, 2009

尽管滚动条(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文件和上面的示例。

Javascript 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
重定向实现代码
Nov 20 Javascript
JAVASCRIPT HashTable
Jan 22 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
jquery maxlength使用说明
Sep 09 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
js防抖和节流的深入讲解
Dec 06 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 #Javascript
Mootools 1.2教程 正则表达式
Sep 15 #Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 #Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 #Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 #Javascript
You might like
使用PHP获取网络文件的实现代码
2010/01/01 PHP
php 文本文件的读取效率
2012/02/10 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
python操作日期和时间的方法
2014/03/11 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
求职简历自我评价范例
2014/03/12 职场文书
专家推荐信模板
2014/05/09 职场文书
西柏坡导游词
2015/02/05 职场文书
支教个人总结
2015/03/04 职场文书
党员转正大会主持词
2015/07/02 职场文书
公司保密管理制度
2015/08/04 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫