UDN-企业互联网技术人气社区

板块导航

浏览  : 453
回复  : 4

[mootools] Mootools 1.2教程 滚动条(Slider)

[复制链接]
友美的小妹的头像 楼主
发表于 2015-8-22 11:44:50 | 显示全部楼层 |阅读模式
      尽管滚动条(Slider)遵循这个熟悉的模式,但是任然还有一点特殊的地方。

      基本用法


      创建一个新的滚动条(Slider)对象


      我们首先从HTML和CSS开始。基本的想法是创建一个滚动条的div,因此是一个长的长方形(长度取决于我们用滚动条做什么),还有一个子元素作为滑块。


      参考代码:
  1. <div id="slider"><div id="knob"></div></div>
复制代码
      我们的CSS也可以这么简单。只需要设置宽、高,还有背景颜色。

      参考代码:
  1. #slider {
  2. width: 200px
  3. height: 20px
  4. background-color: #0099FF
  5. }
  6. #knob {
  7. width: 20px
  8. height: 20px
  9. background-color: #993333
  10. }
复制代码



      现在,我们可以创建我们的新滚动条对象了。要初始化滚动条,首先要把你的相关元素赋值给一些变量,然后使用“new”来创建一个滚动条Slider对象,这和我们以前创建tween、morph和drag.move时一样:
      参考代码:
  1. // 把元素赋值给变量
  2. var sliderObject = $('slider');
  3. var knobObject = $('knob');
  4. // 创建一个新的slider对象
  5. // 首先定义slider元素
  6. // 然后定义滑块元素
  7. var SliderObject = new Slider(sliderObject , knobObject , {
  8. // 这里是你的选项
  9. // 稍后我们会仔细讲一下这些选项
  10. range: [0, 10],
  11. snap: true,
  12. steps: 10,
  13. offset: 0,
  14. wheel: true,
  15. mode: 'horizontal',
  16. // 当step的值改变时将触发onchange事件
  17. // 它会把当前的step作为参数传入
  18. onChange: function(step){
  19. // 在这里放置onchange时要执行的代码
  20. // 你可以引用step
  21. },
  22. // 当用户拖动滑块时触发ontick事件
  23. // 它会传递当前的位置(相对于父元素的位置)
  24. onTick: function(pos){
  25. // 这是必需的,用以调整滑块的位置
  26. // 我们会在下面详细解释这个
  27. this.knob.setStyle('left', pos);
  28. },
  29. // 当拖动停止时触发
  30. onComplete: function(step){
  31. // 当完成时要执行的代码
  32. // 你可以引用step
  33. }
  34. });
复制代码



      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)。

      参考代码:
  1. window.addEvent('domready', function() {
  2. var SliderObject = new Slider('slider', 'knob', {
  3. // 选项
  4. range: [0, 10],
  5. snap: false,
  6. steps: 10,
  7. offset: 0,
  8. wheel: true,
  9. mode: 'horizontal',
  10. // 回调事件
  11. onChange: function(step){
  12. $('change').highlight('#F3F825');
  13. $('steps_number').set('html', step);
  14. },
  15. onTick: function(pos){
  16. $('tick').highlight('#F3F825');
  17. $('knob_pos').set('html', pos);
  18. // 这一行是必需的(水平滚动使用left)
  19. this.knob.setStyle('left', pos);
  20. },
  21. onComplete: function(step){
  22. $('complete').highlight('#F3F825')
  23. $('steps_complete_number').set('html', step);
  24. this.set(step);
  25. }
  26. });
  27. var SliderObjectV = new Slider('sliderv', 'knobv', {
  28. range: [-10, 0],
  29. snap: true,
  30. steps: 10,
  31. offset: 0,
  32. wheel: true,
  33. mode: 'vertical',
  34. onTick: function(pos){
  35. // 这一行是必需的(垂直滚动使用top)
  36. this.knob.setStyle('top', pos);
  37. },
  38. onChange: function(step){
  39. $('stepsV_number').set('html', step*-1);
  40. }
  41. });
  42. // 设置垂直滚动的从0开始
  43. // 否则的话是从顶部开始
  44. SliderObjectV.set(0);
  45. // 设置滚动条从7开始
  46. $('set_knob').addEvent('click', function(){ SliderObject.set(7)});
  47. });
复制代码
      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中的“规则”。这只是我让它们正确运行的一种方法,我很有兴趣听到一些其他的清楚的说法。










相关帖子

发表于 2015-8-22 20:10:57 | 显示全部楼层
很好的帖子
点评 ( 1 ) 收起 / 展开点评

静静的小婊妹 2015年08月22日 20:17 详情 回复

这个排版好漂亮

使用道具 举报

回复

发表于 2015-8-22 20:17:43 | 显示全部楼层
这个排版好漂亮
使用道具 举报

回复

发表于 2015-9-18 02:37:25 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

发表于 2015-9-18 16:33:30 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部