jQuery 入门教程(38): jQuery UI Slider 示例（一）

来源：互联网发布：多迪网络是培训机构吗编辑：程序博客网时间：2024/05/22 16:05

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 指定当前选择的值域。

1range: true
2min: 0,
3max: 500,
4values: [ 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>

20130320014