MooTools - 滑块

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

创建新的滑块

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

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

语法

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

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

滑块选项

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

Snap（捕捉）

Snap 值可以是 true 或 false。这决定了旋钮在沿滑块拖动时是否捕捉到步长。默认情况下为 false。

Offset（偏移量）

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

Range（范围）

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

Wheel（滚轮）

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

Steps（步长）

默认的 100 个步长非常有用，因为它易于用百分比表示。但是，您可以在合理范围内设置任意数量的步长。默认情况下为 100。

Mode（模式）

Mode 将定义滑块是垂直注册还是水平注册。但是，从水平转换为垂直还需要一些额外的步骤。默认情况下为水平。

回调事件

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

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>

输出

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

打印页面