jqueryui插件slider的简单使用

最新推荐文章于 2025-06-23 13:28:54 发布

reblue520

最新推荐文章于 2025-06-23 13:28:54 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/reblue520/article/details/80553367

这篇博客介绍了如何使用jQueryUI的Slider插件创建一个显示数值的滚动条。通过示例，展示了Slider的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>slider</title>
    <meta charset="utf-8">
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
    <p id="mem_num"></p>
    
    <div id="slider"></div>

    <button class="btn btn-success" id="test01">禁用</button>
    <button class="btn btn-success" id="test02">激活</button>
    <button class="btn btn-success" id="test03">获取参数</button>
    <button class="btn btn-success" id="test04">切换</button>

    <script type="text/javascript">

        $( "#slider" ).slider({
            // 动画效果快速
            animate: "fast",
            // 关闭滑动条
            // disabled: true,
            //最小值为2，最大值为32，每一次拖动变化为2，默认值为4
            min: 2,
            max: 32,
            step: 2,
            value: 4,
            // 获取滑动条的值并且打印
            slide: function( event, ui ) {
                $('#mem_num').html(ui.value)
                console.log(ui.value);
            }
        });
        //禁用滑动条
        $('#test01').on('click', function(){
            $( "#slider" ).slider( "option", "disabled", true );
        })

        //激活滑动条
        $('#test02').on('click', function(){
            $( "#slider" ).slider("enable");
        })
        
        //获取滑动条的值，在console窗口打印
　　　　

        $('#test03').on('click', function(){
            console.log($( "#slider" ).slider( "value" ));
        })

        //在禁用和激活之间切换
        $('#test04').on('click', function(){
            var is_disabled = $( "#slider" ).slider( "option", "disabled" );

            if(is_disabled) {
                $("#slider").slider("enable");
                $('#test04').html('禁用');
            }else{
                $( "#slider" ).slider( "option", "disabled", true );
                $('#test04').html('激活');
            }
        })
        
    </script>
</body>
</html>

示例，滚动条展示数值：

参考：

http://jqueryui.com/slider/#custom-handle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jqueryui</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <style>
  #custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }
  </style>
</head>
<body>
  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>

<!-- <div id="slider" class="selector"></div> -->

<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

<script>
  $( function() {
    var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
      // range: true,
      min: 2,
      max: 64,
      step: 2,
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle.text( ui.value );
      }
    });
  } );
  </script>
</html>