7.8 技巧：使用滑块微件获取数字
在客户端应用程序中，你有时会发现滑块用做输入数字的元素。滑块的优点是，它比数字输入框更可视化和更直观。
代码清单7-8展示了如何将div改成滑块（slider）微件。
代码清单7-8 将
元素转换为滑块并显示其值
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>jQuery UI Slider</title>
05 <link type="text/css" rel="stylesheet" href=
06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css">
07 <style>
08 #my-slider {
09 width: 250px;
10 }
11 </style>
12 </head>
13 <body>
14
15 <h2>The slider</h2>
16 <div id="my-slider"></div>
17
18 <h2>The slider value</h2>
19 <input type="text" id="slider-value">
20
21 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
22 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js">
23 </script>
24
25 <script>
26 // 请将下列代码移至一个外部的.js文件中
27 $(document).ready(function() {
28
29 $('#my-slider').slider({
30 change: function() {
31 $('#slider-value').attr('value', $(this).slider("value"));
32 }
33 });
34
35 });
36 </script>
37 </body>
38 </html>
除了初始化滑块，这段代码还实现了一个事件处理程序来监听change事件。所有变化都会反应在传统的输入框上。
7.8.1 为滑块元素添加样式
与其他jQuery UI组件相比，滑块组件生成的HTML结构相对较小。在下面的代码段中，一些类加入到div上，以使它看起来像一个滑块，并且添加了一个锚（anchor）元素来显示滑块的把手（handle）。
<div id="my-slider"
class="ui-slider ui-slider-horizontal ui-widget ui-widget-content
ui-corner-all">
<a class="ui-slider-handle ui-state-default ui-corner-all"
href="#" style="left: 0%; "></a>
</div>
7.8.2 设置滑块的选项
使用滑块微件时，有几个选项可以调整。表7-5为可用于滑块微件的选项列出了代码示例和描述。
7.8.3 捕获滑块的事件
有几个地方可以为滑块绑定事件处理。下面的代码片段举例说明了在哪些地方可以这么做。
当一个新的滑块组件初始化时进行的事件处理：
$('#my-slider').slider({create: function(event, ui) {
// 事件处理
}});
//或
$('#my-slider')
.on('slidecreate', function(event, ui) {
// 事件处理
})
.slider();
当用户开始滑动滑块的把手时进行的事件处理：
$('#my-slider').slider({start: function(event, ui) {
// 事件处理
}});
//或
$('#my-slider').slider()
.on('slidestart', function(event, ui) {
// 事件处理
});
当用户继续滑动滑块的把手时进行的事件处理：
$('#my-slider').slider({slide: function(event, ui) {
// 事件处理
}});
//或
$('#my-slider').slider()
.on('slide', function(event, ui) {
// 事件处理
});
当滑块的值发生变化时进行的事件处理：
$('#my-slider').slider({change: function(event, ui) {
// 事件处理
}});
//或
$('#my-slider').slider()
.on('slidechange', function(event, ui) {
// 事件处理
});
当用户停止滑动滑块的把手时进行的事件处理：
$('#my-slider').slider({stop: function(event, ui) {
// 事件处理
}});
//或
$('#my-slider').slider()
.on('slidestop', function(event, ui) {
// 事件处理
});
7.8.4 调用滑块的方法
滑块微件使用的方法与第6章讲的可拖曳交互组件以及对话框和折叠菜单微件相同。请参阅这些章节来获得关于destroy、disable、enable、option和widget的详细内容。
将滑块的值更新为10：
$('#my-slider').slider('value', 10);
将滑块的取值范围更新为10～20：
$('#my-slider').slider('values', [10, 20]);
时间： 2024-12-02 13:08:59