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

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

基本用法

1
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js">script>
8 <scriptsrc="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 <labelfor="amount">Volume:label>
29 <inputtype="text"id="amount"style="border: 0;
30 color: #f6931f; font-weight: bold;" />
31 p>
32
33 <divid="slider-vertical"style="height: 200px;">div>
34 body>
35 html>

垂直选择值域

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

1
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
6 <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/>
7 <scriptsrc="scripts/jquery-1.9.1.js">script>
8 <scriptsrc="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 <labelfor="amount">Target sales goal (Millions):label>
30 <inputtype="text"id="amount"style="border: 0;
31 color: #f6931f; font-weight: bold;" />
32 p>
33
34 <divid="slider-range"style="height: 250px;">div>
35
36
37 body>
38 html>

你可能感兴趣的:(jQuery 入门教程(39): jQuery UI Slider 示例(二))