MooTools教程

MooTools - Sliders

滑块是一种在滑动旋钮或任何按钮时反映动作的功能.您可以在定义元素，处理程序，选项和回调事件时创建自己的滑块.让我们讨论一下滑块的更多信息.

创建一个新的滑块

我们首先要为滑块选择合适的HTML元素.在考虑基本思想时，div元素最适合滑块，因为使用div，我们可以创建子元素.我们现在必须为这些div设置CSS，使div结构成为一个完美的滑块.这里，父div用于滑块，子div用于 knob .

我们现在必须使用这些div作为滑块将元素作为 sliderObject 和 knobObject 传递给Slider构造函数.看一下定义滑块的以下语法.

语法

var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);

我们还必须定义滑块选项.

滑块选项

让我们讨论一些用于滑块的选项.

Snap

快照值可以是true或false值.这决定了旋钮在沿滑块拖动时是否与步骤对齐.默认情况下，它为假.

偏移

这是旋钮相对于起始位置的相对偏移量.尝试尝试这个.默认情况下，它为0.

范围

这是一个非常有用的选项.您可以设置步骤将进入的数字范围.例如，如果您的范围是[0,200]并且您有10个步骤，那么您的步数将相差20.范围还可以包括负数，例如[-10,0]，这在反转滚动时非常有用.默认情况下，它为false.

Wheel

将wheel设置为true，滚动条将识别mousewheel事件.使用鼠标滚轮时，您可能需要调整范围以确保鼠标滚轮事件不会反转(再次，稍后会更多).

步骤

100步的默认值非常有用，因为它很容易用作百分比.但是，您可以在合理范围内设置尽可能多的步骤(可用).默认情况下，它是100.

模式

模式将定义滑块是将其自身注册为垂直还是水平.但是，从水平和垂直转换还有一些更必要的步骤.默认情况下，它是水平的.

回调事件

Slider提供了三个重要的回调事件.

onChange

当前步骤中的任何更改都会触发事件的执行.查看下面给出的示例，了解它的执行时间.

onTick

句柄位置的任何变化都会触发此事件的执行.查看下面给出的示例以查看它执行的内容.

onComplete

只要释放句柄，就会执行此事件.查看下面给出的示例以查看它的执行时间.

示例

以下示例说明水平和垂直滑块以及事件指示器.请看下面的代码.

<!DOCTYPE html>
<html>

   <head>
      <style "text/css">
         #slider {
            width: 200px;
            height: 20px;
            background-color: #0099FF;
         }
         #knob {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #sliderv {
            width: 20px;
            height: 200px;
            background-color: #0099FF;
         }
         #knobv {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #change{
            background-color: burlywood;
            border: 2px solid black;
            width: 200px;
         }
         #complete{
            background-color: burlywood;
            border: 2px solid black;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            
            var SliderObject = new Slider('slider', 'knob', {
               //options
               range: [0, 10],
               snap: false,
               steps: 10,
               offset: 0,
               wheel: true,
               mode: 'horizontal',
               
               //callback events
               onChange: function(step){
                  $('change').highlight('#F3F825');
                  $('steps_number').set('html', step);
               },
               
               onTick: function(pos){
                  $('tick').highlight('#F3F825');
                  $('knob_pos').set('html', pos);
                  
                  //this line is very necessary (left with horizontal)
                  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',
               onChange: function(step){
                  $('stepsV_number').set('html', step*-1);
               }
            });
            
            //sets the vertical one to start at 0
            //without this it would start at the top
            SliderObjectV.set(0);
            
            //sets the slider to step 7
            $('set_knob').addEvent('click', function(){ SliderObject.set(7)});
         });
      </script>
   </head>
   
   <body>
      <div id = "slider">
         <div id = "knob"></div>
      </div><br/><br/>
      
      <div id = "sliderv">
         <div id = "knobv"></div>
      </div><br/>
      
      <span id = "stepsV_number"></span> <br/>
      
      <div id = "change" class = "indicator">
         <strong>onChange</strong><br/>
         Passes the step you are on: <span id = "steps_number"></span>
      </div></br/>
      
      <div id = "complete" class = "indicator">
         <strong>onComplete</strong><br />
         passes the current step: <span id = "steps_complete_number"></span>
      </div>
      
   </body>
</html>