jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件，滑动条可以支持多个滑块用来设置单个值或一个值域。
基本用法
1 | <!doctype html> |
2 | <html lang="en"> |
3 | <head> |
4 | <meta charset="utf-8" /> |
5 | <title>jQuery UI Demos</title> |
6 | <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> |
7 | <script src="scripts/jquery-1.9.1.js"></script> |
8 | <script src="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 | <script> |
10 | $(function () { |
11 | $("#slider").slider(); |
12 | }); |
13 | </script> |
14 | </head> |
15 | <body> |
16 | <div id="slider"></div> |
17 |
18 | </body> |
19 | </html> |
多个滑块选择值域
Slider支持使用两个滑块来选择一个值域，通过 min,max指定大范围， values 指定当前选择的值域。
1 | range: true |
2 | min: 0, |
3 | max: 500, |
4 | values: [ 75, 300 ], |
完整代码如下：
1 | <!doctype html> |
2 | <html lang="en"> |
3 | <head> |
4 | <meta charset="utf-8" /> |
5 | <title>jQuery UI Demos</title> |
6 | <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> |
7 | <script src="scripts/jquery-1.9.1.js"></script> |
8 | <script src="scripts/jquery-ui-1.10.1.custom.js"></script> |
9 | <script> |
10 | $(function () { |
11 | $("#slider-range").slider({ |
12 | range: true, |
13 | min: 0, |
14 | max: 500, |
15 | values: [75, 300], |
16 | slide: function (event, ui) { |
17 | $("#amount").val("$" + ui.values[0] |
18 | + " - $" + ui.values[1]); |
19 | } |
20 | }); |
21 | $("#amount").val("$" |
22 | + $("#slider-range").slider("values", 0) + |
23 | " - $" + $("#slider-range").slider("values", 1)); |
24 | }); |
25 | </script> |
26 | </head> |
27 | <body> |
28 |
29 | <p> |
30 | <label for="amount">Price range:</label> |
31 | <input type="text" id="amount" |
32 | style="border: 0; color: #f6931f; |
33 | font-weight: bold;" /> |
34 | </p> |
35 |
36 | <div id="slider-range"></div> |
37 |
38 |
39 | </body> |
40 | </html> |
作者：mapdigit 发表于2013-4-18 8:31:00 原文链接
阅读：57 评论：0 查看评论