JqueryUI - 滑块小部件
每当要获得特定范围内的数值时，都会使用slider滑块。 滑块优于文本输入的优点是用户不可能输入错误的值。 他们可以使用滑块选择的任何值都是有效的。
jQueryUI 通过滑块小部件为我们提供了一个滑块控件。 jQueryUI 提供了 slider() 方法来改变页面中 HTML 元素的外观，添加新的 CSS 类来赋予它们适当的样式。
语法
slider()方法可以使用两种形式 −
$ (selector, context).slider (options) 方法
slider (options) 方法声明 HTML 元素应作为滑块进行管理。 options 参数是一个指定滑块外观和行为的对象。
语法
$(selector, context).slider (options);
您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −
$(selector, context).slider({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 −
| 序号 | 选项 & 说明 |
|---|---|
| 1 | animate
此选项设置为 true 时，会在用户直接单击轴时创建动画效果。 默认情况下，它的值为 false。 |
| 2 | disabled
当设置为 true 时，此选项会禁用滑块。 默认情况下，它的值为 false。 |
| 3 | max
此选项指定滑块可以达到的范围的上限值 - 当手柄移动到最右侧（对于水平滑块）或顶部（对于垂直滑块）时表示的值。 默认情况下，它的值为 100。 |
| 4 | min
此选项指定滑块可以达到的范围的下限值 - 当手柄移动到最左侧（对于水平滑块）或底部（对于垂直滑块）时表示的值。 默认情况下，它的值为 0。 |
| 5 | orientation
此选项指示滑块的水平或垂直方向。 默认情况下，它的值为horizontal。 |
| 6 | range
此选项指定滑块是否代表一个范围。 默认情况下，它的值为 false。 |
| 7 | step
此选项指定允许滑块表示的最小值和最大值之间的离散间隔。 默认情况下，它的值为 1。 |
| 8 | value
此选项指定单手柄滑块的初始值。 如果有多个句柄（请参阅值选项），请指定第一个句柄的值。 默认情况下，它的值为 1。 |
| 9 | values
此选项属于数组类型，会导致创建多个句柄并指定这些句柄的初始值。 此选项应该是一组可能的值，每个句柄一个。 默认情况下，它的值为 null。 |
以下部分将向您展示滑块功能的一些工作示例。
默认功能
以下示例演示了滑块功能的一个简单示例，不向 slider() 方法传递任何参数。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-1" ).slider();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "slider-1"></div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 sliderexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的例子中，它是一个基本的水平滑块，有一个可以用鼠标或箭头键移动的手柄。
值、动画和方向的使用
以下示例演示了三个选项 (a) value (b) animate 和 (c) orientation 在 JqueryUI 的滑块功能中的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-2" ).slider({
value: 60,
animate:"slow",
orientation: "horizontal"
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "slider-2"></div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 sliderexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的例子中，滑块的值即初始值被设置为60，因此你看到初始值为60的手柄。现在直接点击轴就可以看到动画效果。
范围、最小值、最大值和值的使用
以下示例演示了三个选项 (a) range、(b) min、(c) max 和 (d) values 在 JqueryUI 的滑块功能中的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-3" ).slider({
range:true,
min: 0,
max: 500,
values: [ 35, 200 ],
slide: function( event, ui ) {
$( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
" - $" + $( "#slider-3" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<!-- HTML -->
<p>
<label for = "price">Price range:</label>
<input type = "text" id = "price"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-3"></div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 sliderexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出。 现在，您可以查看结果 −
在上面的示例中，我们将范围选项设置为 true 以使用两个拖动手柄捕获一系列值。 手柄之间的空间填充有不同的背景颜色，以指示这些值已被选中。
$ (selector, context).slider ("action", params) 方法
slider ("action", params) 方法允许对滑块执行操作，例如将光标移动到新位置。 该操作在第一个参数中指定为字符串（例如，"value"表示游标的新值）。 在下表中查看可以传递的操作。
语法
$(selector, context).slider ("action", params);;
下表列出了可与此方法一起使用的不同action操作 −
| 序号 | 操作 & 说明 |
|---|---|
| 1 | destroy
此操作会完全破坏元素的滑块功能。 元素返回到它们的预初始化状态。 此方法不接受任何参数。 |
| 2 | disable
此操作禁用滑块功能。 此方法不接受任何参数。 |
| 3 | enable
此操作启用滑块功能。 此方法不接受任何参数。 |
| 4 | option( optionName )
此操作检索指定参数选项的值。 此选项对应于与 slider (options) 一起使用的选项之一。 其中 optionName 是要获取的选项的名称。 |
| 5 | option()
此操作获取一个包含表示当前滑块选项散列的键/值对的对象。 |
| 6 | option( optionName, value )
此操作设置与指定的 optionName 关联的滑块选项的值。 参数 optionName 是要设置的选项的名称，value 是要为选项设置的值。 |
| 7 | option( options )
此操作为滑块设置一个或多个选项。 参数 options 是要设置的选项值对的映射。 |
| 8 | value
此操作检索 options.value（滑块） 的当前值。 仅在滑块唯一时使用（如果不是，请使用 slider ("values")）。 此签名不接受任何参数。 |
| 9 | value( value )
此操作设置滑块的值。 |
| 10 | values
此操作检索 options.values 的当前值（数组中滑块的值）。 此签名不接受任何参数。 |
| 11 | values( index )
此操作获取指定句柄的值。 其中 index 是 Integer 类型并且是从零开始的句柄索引。 |
| 12 | values( index, value )
此操作设置指定句柄的值。 其中 index 是从零开始的句柄索引，value 是要设置的值。 |
| 13 | values( values )
此操作设置所有句柄的值。 |
| 14 | widget
此操作返回一个包含滑块的 jQuery 对象。 此方法不接受任何参数。 |
示例
现在让我们看一个使用上表中的操作的示例。 以下示例演示了 disable() 和 value() 方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-4" ).slider({
orientation:"vertical"
});
$( "#slider-4" ).slider('disable');
$( "#slider-5" ).slider({
orientation:"vertical",
value:50,
slide: function( event, ui ) {
$( "#minval" ).val( ui.value );
}
});
$( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "slider-4"></div>
<p>
<label for = "minval">Minumum value:</label>
<input type = "text" id = "minval"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-5"></div>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 sliderexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
在上面的示例中，第一个滑块被禁用，第二个滑块的值设置为 50。
滑块元素的事件管理
除了我们在前面部分看到的滑块（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −
| 序号 | 事件方法 & 说明 |
|---|---|
| 1 | change(event, ui)
此事件通过用户操作或以编程方式触发句柄的值更改。 |
| 2 | create(event, ui)
创建滑块时会触发此事件。 |
| 3 | slide(event, ui)
每当通过滑块拖动手柄时，都会为鼠标移动事件触发此事件。 返回 false 将取消幻灯片。 |
| 4 | start(event, ui)
当用户开始滑动时触发此事件。 |
| 5 | stop(event, ui)
当幻灯片停止时触发此事件。 |
示例
以下示例演示了滑块功能期间的事件方法用法。 此示例演示了事件 start、stop、change 和 slide 的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-6" ).slider({
range:true,
min: 0,
max: 500,
values: [ 35, 200 ],
start: function( event, ui ) {
$( "#startvalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function( event, ui ) {
$( "#stopvalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
change: function( event, ui ) {
$( "#changevalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
slide: function( event, ui ) {
$( "#slidevalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "slider-6"></div>
<p>
<label for = "startvalue">Start:</label>
<input type = "text" id = "startvalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "stopvalue">Stop:</label>
<input type = "text" id = "stopvalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "changevalue">Change:</label>
<input type = "text" id = "changevalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "slidevalue">Slide:</label>
<input type = "text" id = "slidevalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
</body>
</html>
让我们将上面的代码保存在一个 HTML 文件 sliderexample.htm 中，并在支持 javascript 的标准浏览器中打开它，您应该会看到以下输出 −
