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 相关文章推荐
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
镇创先争优活动总结
2014/08/28 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书