MooTools - 滑块

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

创建新滑块

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

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

句法

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

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

滑块选项

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

折断

捕捉值可以是 true 或 false 值。这决定了旋钮沿滑块拖动时是否会捕捉到步骤。默认情况下，它是错误的。

抵消

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

范围

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

车轮

将wheel设置为true，滚动条将识别鼠标滚轮事件。使用鼠标滚轮时，您可能需要调整范围以确保鼠标滚轮事件不会出现反转（同样，稍后会详细介绍）。

脚步

默认的 100 步非常有用，因为它很容易以百分比形式使用。但是，您可以在合理范围内设置任意数量的步骤（可用的）。默认值为 100。

模式

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

回调事件

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

改变时

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

勾选

手柄位置的任何变化都会触发该事件的执行。查看下面给出的示例以了解其执行的内容。

完成时

每当手柄被释放时，该事件就会执行。查看下面给出的示例以查看它何时执行。

例子

以下示例解释了水平和垂直滑块以及事件指示器。看看下面的代码。

<!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>

输出

单击水平或垂直滑块上的棕色旋钮然后拖动它，您将找到每个动作的步骤位置和事件指示。