jQuery 入门教程(38): jQuery UI Slider 示例（一）

无情阅读：703 2021-04-01 09:57:53 评论：0

jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件，滑动条可以支持多个滑块用来设置单个值或一个值域。
基本用法

 
        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").slider(); 
       
        12 
                 }); 
       
        13 
             </script> 
       
        14 
         </head> 
       
        15 
         <body> 
       
        16 
             <div id="slider"></div> 
       
        17 
           
        18 
         </body> 
       
        19 
         </html>

多个滑块选择值域

Slider支持使用两个滑块来选择一个值域，通过 min,max指定大范围， values 指定当前选择的值域。

 
        1 
         range: true 
       
        2 
         min: 0, 
       
        3 
         max: 500, 
       
        4 
         values: [ 75, 300 ],

完整代码如下：

 
        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 
                         range: true, 
       
        13 
                         min: 0, 
       
        14 
                         max: 500, 
       
        15 
                         values: [75, 300], 
       
        16 
                         slide: function (event, ui) { 
           
        17 
                             $("#amount").val("$" + ui.values[0] 
       
        18 
                                 + " - $" + ui.values[1]); 
       
        19 
                         } 
       
        20 
                     }); 
       
        21 
                     $("#amount").val("$" 
       
        22 
                         + $("#slider-range").slider("values", 0) + 
       
        23 
                       " - $" + $("#slider-range").slider("values", 1)); 
       
        24 
                 }); 
       
        25 
             </script> 
       
        26 
         </head> 
       
        27 
         <body> 
       
        28 
           
        29 
             <p> 
       
        30 
                 <label for="amount">Price range:</label> 
       
        31 
                 <input type="text" id="amount" 
       
        32 
                        style="border: 0; color: #f6931f; 
       
        33 
                        font-weight: bold;" /> 
       
        34 
             </p> 
       
        35 
           
        36 
             <div id="slider-range"></div> 
       
        37 
           
        38 
           
        39 
         </body> 
       
        40 
         </html>

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。