选择垂直的jQuery 入门教程(39): jQuery UI Slider 示例（二）java教程

这两天朋友几篇文章介绍了改选择垂直的的文章. 关联文章的地址

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

文章结束给大家分享下程序员的一些笑话语录： Google事件并不像国内主流媒体普遍误导的那样，它仅仅是中国Z府和美国公司、中国文化和美国文化甚至中国人和美国人之间的关系，是民族主义和帝国主义之间的关系；更重要的是，它就是Z府和公司之间的关系，是权力管制和市场自由之间的关系。从这个意义上说，过度管制下的受害者，主要是国内的企业。Google可以抽身而去，国内的企业只能祈望特区。www.ishuo.cn