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

最新推荐文章于 2023-04-11 08:44:37 发布

最新推荐文章于 2023-04-11 08:44:37 发布 · 176 阅读

文章标签：

前面的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>