jQuery 入门教程(39): jQuery UI Slider 示例(二)分析

符号 阅读:270 2021-04-01 09:57:48 评论:0


前面的slider 例子Slider都是水平显示的,Slider也可以显示成垂直的,这可以通过配置orientation ,将其值设为“vertical”。

基本用法

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-vertical").slider({
12                 orientation: "vertical",
13                 range: "min",
14                 min: 0,
15                 max: 100,
16                 value: 60,
17                 slide: function (event, ui) {
18                     $("#amount").val(ui.value);
19                 }
20             });
21             $("#amount").val($("#slider-vertical")
22                 .slider("value"));
23         });
24     </script>
25 </head>
26 <body>
27     <p>
28         <label for="amount">Volume:</label>
29         <input type="text" id="amount" style="border: 0;
30                  color: #f6931f; font-weight: bold;" />
31     </p>
32  
33     <div id="slider-vertical" style="height: 200px;"></div>
34 </body>
35 </html>

20130320015

垂直选择值域

同样,Slider垂直显示时也可以使用两个滑块来选择值域。

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                 orientation: "vertical",
13                 range: true,
14                 values: [17, 67],
15                 slide: function (event, ui) {
16                     $("#amount").val("$" + ui.values[0]
17                         + " - $" + ui.values[1]);
18                 }
19             });
20             $("#amount").val("$" + $("#slider-range")
21                 .slider("values", 0) +
22               " - $" + $("#slider-range").slider("values", 1));
23         });
24     </script>
25 </head>
26 <body>
27  
28     <p>
29         <label for="amount">Target sales goal (Millions):</label>
30         <input type="text" id="amount" style="border: 0;
31                 color: #f6931f; font-weight: bold;" />
32     </p>
33  
34     <div id="slider-range" style="height: 250px;"></div>
35  
36  
37 </body>
38 </html>

20130320016

 
声明

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

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号