• 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：用户停止滑块时触发
  • 相关阅读:
    通俗易懂的Docker (一篇文章就让你玩转)
    4月2日-3日·上海 | 3DCC 第二届3D细胞培养与类器官研发峰会携手CGT Asia 重磅来袭
    akshare复权算法-港股复权后数据代码分享
    innovus笔记——mem（macro）太多，怎么才能摆出符合数据流的mem呢？
    医疗产品设计情况下要注意哪些标准?
    浅谈如何解决公共组件父子组件依赖调用和子组件校验父组件条件的问题
    重新认识下JVM级别的本地缓存框架Guava Cache(3)——探寻实现细节与核心机制
    23中设计模式之一— — — —命令模式的详细介绍
    android studio启动虚拟器失败
    OpenFeign、Feign以及Ribbon关系介绍
  • 原文地址：https://blog.csdn.net/weixin_71792169/article/details/127758095