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

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

示例

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

                  #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;         }                                             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)});         });