script.aculo.us - 创建滑块
滑块是带有一个或多个手柄的细轨道，用户可以沿着轨道拖动它们。
滑块的目的是提供一种定义数值的替代输入方法;滑块代表一个范围，沿着轨道滑动手柄定义此范围内的值。
滑块可以水平或垂直放置。水平放置时，轨道的左端通常代表最低值，而垂直放置时，滑块的底部通常是最低值。
要使用 script.aculo.us 的滑块功能，您需要加载 slider.js 模块以及prototype.js 模块。因此，script.aculo.us 的最小加载量将如下所示 −
<script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>
创建滑块控件
创建滑块，通常就是在页面 DOM 中的几个现有元素上构建自定义对象。这里需要两个元素，一个用于 handle，另一个用于 track，如下所示 −
new Control.Slider(handle, track [ , options ] );
track 元素通常是 <div>，handle 元素是 track 元素内的 <div> 或 <span>。两者都可以通过其 id= 或直接 DOM 引用传递，与往常一样。
Sliders 选项
创建 Slider 对象时，可以使用以下一个或多个选项。
| Sr.No | 选项和说明 |
|---|---|
| 1 |
Axis 将控件的方向定义为水平或垂直。默认方向为水平。 |
| 2 |
Range 将滑块值的范围定义为原型 ObjectRange 实例的实例。默认为 0 到 1。 |
| 3 |
Values 定义滑块可以获取的离散值集。如果省略，则可以设置范围内的所有值。 |
| 4 |
sliderValue 设置滑块的初始值。如果省略，滑块最左边缘(或最上边缘)所表示的值即为初始值。 |
| 5 |
Disabled 如果为 true，则创建最初处于禁用状态的滑块。显然默认为 false。 |
| 6 |
setValue 将更新滑块的值，从而将滑块手柄移动到适当的位置。 |
| 7 |
setDisabled 将滑块设置为禁用状态 (disabled = true)。 |
| 8 |
setEnabled 将滑块设置为启用状态 (disabled = false)。 |
您可以在 options 参数中提供以下回调−
| Sr.No | 选项和说明 |
|---|---|
| 1 |
onSlide 每当 Slider 通过拖动移动时调用。调用的函数将滑块值作为其参数。 |
| 2 |
onChange 每当 Slider 完成移动或通过 setSlider Value 函数更改其值时调用。被调用的函数获取滑块值作为其参数。 |
滑块示例
<html>
<head>
<title>Sliders Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
<script type = "text/javascript">
window.onload = function() {
new Control.Slider('handle1' , 'track1',{
range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){
$('changed').innerHTML = 'Changed Value : '+v;
},
onSlide: function(v) {
$('sliding').innerHTML = 'Sliding Value: '+v;
}
});
new Control.Slider('handle2' , 'track2', {
range: $R(1,100),
axis:'vertical',
sliderValue: 1,
onChange: function(v){
$('changed').innerHTML = 'Changed Value : '+v;
}
onSlide: function(v) {
$('sliding').innerHTML = 'Sliding Value: '+v;
}
});
}
</script>
<style type = "text/css">
h1{ font-size: 1.5em; }
.track {
background-color: #aaa;
position: relative;
height: 0.5em; width: 10em;
cursor: pointer; z-index: 0;
}
.handle {
background-color: red;
position: absolute;
height: 1em; width: 0.25em; top: -0.25em;
cursor: move; z-index: 2;
}
.track.vertical {
width: 0.5em; height: 10em;
}
.track.vertical .handle {
width: 1em; height: 0.25em; top: 0; left: -0.25em;
}
</style>
</head>
<body>
<h1>Simple sliders</h1>
<div id = "track1" class = "track" style = "width: 20em;" >
<div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
</div>
<p id = "sliding" ></p>
<p id = "changed" ></p>
<div id = "track2" class = "track vertical" style = "position: absolute; left: 25em; top: 3em;" >
<div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
</div>
</body>
</html>
注意事项:
您可以使用 CSS 更改任何滑块的滑块图像。使用 CSS 属性 background-image: url(track.gif) 和 background-repeat: no-repeat 设置滑块图像。
可以使用 $R(minValue, MaxValue) 指定范围值。例如，$R(1, 100)。
范围值可以用具体值来指定。例如值:[1,25,50,75,100]。在这种情况下，滑块只会在移动手柄时实现列出的离散值。
在任何时候，都可以通过调用滑块实例的 setValue() 方法在程序控制下设置滑块的值，例如:sliderInstance.setValue(50);
这将产生以下结果 −
