MooTools - 滑块

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

创建新滑块

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

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

语法

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

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

滑块选项

让我们讨论一下用于滑块的几个选项。

Snap

snap 值可以是 true 或 false。这决定了滑块在沿着滑块拖动时是否与步骤对齐。默认情况下，它是 false。

偏移

这是滑块与起始位置的相对偏移。尝试尝试一下。默认情况下，它是 0。

范围

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

滚轮

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

步数

默认的 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>

输出

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