jQuery 入门教程(39): jQuery UI Slider 示例(二)
符号
阅读:676
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 > |
垂直选择值域
同样,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 > |
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。