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

浅浅的花香味﹌ 2024-02-17 14:12 141阅读 0赞



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

20130320015

垂直选择值域

同样，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>

20130320016

发表评论

表情：
评论列表 （有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读