• JQuery UI——滑动条组件

    在底层元素上调用slider方法可以生成滑动条组件

    一.配置滑动条
    滑动条组件的选项：

    • animate：若设为true，用户点击滑块会跳动
    • disable：禁用滑块
    • max：滑动条最大值，默认100
    • min：滑动条最小值，默认0
    • orientation：滑动条方向
    • range：和values选项一起生成具有多个滑块的滑动条
    • step：定义从max到min的最小间距
    • value：滑动条表示的值
    • values：和range一起创建多个滑块的滑动条
    1. /**orientation改变滑动方向*/
    2.  
    3. <html>
    4. <head>
    5.     <title></title>
    6.     <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    7.     <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    8.     <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
    9. </head>
    10. <style type="text/css">
    11.  #hslider,#vslider{margin:10px}
    12. </style>
    13. <script type="text/javascript">
    14.  $(function(){
    15.  $("#hslider").slider({
    16.  value:35
    17.  });
    18.  
    19.  $("#vslider").slider({
    20.  orientation:"vertical",
    21.  value:35
    22.  });
    23.  });
    24. </script>
    25. <body>
    26.     <div id="hslider"></div>
    27.     <div id="vslider"></div>
    28. </body>
    29. </html>
    • 1

    1. /**给滑动条增加动画效果*/
    2.  
    3. <script type="text/javascript">
    4.     $(function(){
    5.         $("#slider").slider({
    6.             animate:"fast"
    7.         });
    8.     });
    9. </script>
    10. <body>
    11.     <div id="slider"></div>
    12.  
    13. /**截图效果不明显，小伙伴们可自行演示*/
    • 1
    1. /**创建范围选择器*/
    2.  
    3. <script type="text/javascript">
    4.  $(function(){
    5.  $("#slider").slider({
    6.  value:[35,65],
    7.  range:true,
    8.  create:displaySliderValues,
    9.  slide:displaySliderValues
    10.  });
    11.  
    12.  function displaySliderValues(){
    13.  $("#lower").text($("#slider").slider("values",0));
    14.  $("#upper").text($("#slider").slider("values",1));
    15.  }
    16.  });
    17. </script>
    18. <body>
    19.     <div id="slider"></div>
    20.     <div>Lower Value:<span id="lower"></span>
    21.         Upper Value:<span id="upper"></span></div>
    22. </body>
    23.  
    24. /**为了得到范围选择器，需要把range选项设置位true，并把values选项设置为一个包含最低和最高边界的数组（创建普通滑块条使用value选项，而范围选择器使用values），在例子中create和slide事件绑定了处理函数，其中$("#lower").text($("#slider").slider("values",0));滑块的顺序号从0开始计算，即取得第一个滑块的值显示在div中*/
    • 1

    二.滑动条组件方法

    • destory：让底层化快恢复原始状态
    • disable：禁用滑块
    • enable：启用滑块
    • option：改变滑块条组件选项
    • “value”,value：得到或者设置值
    • “values”,[values]：得到或者设置范围选择器的值
    1. /**滑动条控制实例*/
    2.  
    3. <html>
    4. <head>
    5.     <title></title>
    6.     <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    7.     <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    8.     <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
    9. </head>
    10. <style type="text/css">
    11.  #slider,#rangeslider,*.inputDiv{margin:10px}
    12.  label{width:80px;display: :inline-block;margin:4px;}
    13. </style>
    14. <script type="text/javascript">
    15.  $(function(){
    16.  $("#slider").slider({
    17.  value:50,
    18.  create:function(){
    19.  $("#slideVal").val($("#slider").slider("value"));
    20.  }
    21.  });
    22.  
    23.  $("#rangeslider").slider({
    24.  values:[35,65],
    25.  range:true,
    26.  create:function(){
    27.  $("#rangeMin").val($("#rangeslider").slider("values",0));
    28.  $("#rangeMax").val($("#rangeslider").slider("values",1));
    29.  }
    30.  });
    31.  
    32.  $("input").change(function(e){
    33.  switch (this.id){
    34.  case "rangeMin":
    35.  case "rangeMax":
    36.  var index = (this.id == "rangeMax")?1:0;
    37.  $("#rangeslider").slider("values",index,$(this).val())
    38.  break;
    39.  case "slideVal":
    40.  $("#slider").slider("value",$(this).val())
    41.  break;
    42.  }
    43.  });
    44.  });
    45. </script>
    46. <body>
    47.     <div id="rangeslider"></div>
    48.     <div class="inputDiv">
    49.         <label for="rangeMin">Range Min:</label><input id="rangeMin" />
    50.         <label for="rangeMax">Range Max:</label><input id="rangeMax" />
    51.     </div>
    52.     <div id="slider"> 
    53.  
    54.     </div>
    55.     <div class="inputDiv">
    56.         <label for="slideVal">Slide Val:</label><input id="slideVal" />
    57.     </div>
    58.  
    59. </body>
    60. </html>
    • 1


    当input数字变化时，处理函数就会自动执行

    三.滑动条组件事件

    • create：当滑动条创建完成时触发
    • start：用户开始滑动滑块时触发
    • slide：滑动滑块过程中，鼠标每一次移动都会触发
    • change：当用户停止滑块或者使用脚本改变滑动条组件值时触发
    • stop：用户停止滑块时触发
  • 相关阅读:
    LRU自定义最近最少使用-java实现
    计算机网络期末知识点（第六章）
    Python获取jsonp数据
    SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
    Spark Rdd之mapToPair，flatMapToPair
    双11数码好物推荐、这几款产品很难让人拒绝
    详解：生产线平衡改善的四大方法与八大步骤！
    vue封装wangEditor
    Docker 使用总结
    使用bitnamiredis-sentinel部署Redis 哨兵模式
  • 原文地址：https://blog.csdn.net/weixin_71792169/article/details/127758095