jQuery 入门教程(38): jQuery UI Slider 示例(一)分析

无情 阅读:168 2021-04-01 09:57:53 评论:0


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>

20130320013

多个滑块选择值域

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>

20130320014

 
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号