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

最新推荐文章于 2023-09-30 21:40:03 发布

引路蜂

最新推荐文章于 2023-09-30 21:40:03 发布

阅读量2.7k

点赞数 2

分类专栏： JavaScript jQuery 教程 jQuery教程

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

jQuery

48 篇文章

订阅专栏

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