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>
输出
点击水平或垂直滑块上的棕色旋钮并拖动它，您将看到每个动作的步骤位置和事件指示。
