jQuery 入门教程(39): jQuery UI Slider 示例（二）

最新推荐文章于 2024-09-10 20:04:35 发布

iteye_19603

最新推荐文章于 2024-09-10 20:04:35 发布

阅读量136

点赞数

文章标签： ui javascript ViewUI

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

基本用法

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#slider-vertical").slider({ 
 
orientation: "vertical", 
 
range: "min", 
 
min: 0, 
 
max: 100, 
 
value: 60, 
 
slide: function (event, ui) { 
 
$("#amount").val(ui.value); 
 
} 
 
}); 
 
$("#amount").val($("#slider-vertical") 
 
.slider("value")); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<p> 
 
<labelfor="amount">Volume:</label> 
 
<inputtype="text"id="amount"style="border: 0; 
 
color: #f6931f; font-weight: bold;" /> 
 
</p> 
 
    32
 
<divid="slider-vertical"style="height: 200px;"></div> 
 
</body> 
 
</html>

垂直选择值域

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

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#slider-range").slider({ 
 
orientation: "vertical", 
 
range: true, 
 
values: [17, 67], 
 
slide: function (event, ui) { 
 
$("#amount").val("$" + ui.values[0] 
 
+ " - $" + ui.values[1]); 
 
} 
 
}); 
 
$("#amount").val("$" + $("#slider-range") 
 
.slider("values", 0) + 
 
" - $" + $("#slider-range").slider("values", 1)); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    27
 
<p> 
 
<labelfor="amount">Target sales goal (Millions):</label> 
 
<inputtype="text"id="amount"style="border: 0; 
 
color: #f6931f; font-weight: bold;" /> 
 
</p> 
 
    33
 
<divid="slider-range"style="height: 250px;"></div> 
 
    35
 
    36
 
</body> 
 
</html>