jqueryUI 设置数值的滑动条-CFANZ编程社区

上一篇文件讲了jqueryUI 使用介绍，在知道了大概jqueryUI如何使用之后，那么下面就来按照里面的demo，写一个显示数值的滑动条看看。

参照demo示例

http://jqueryui.com/draggable/#constrain-movement

实现基本的HTML+CSS

jqueryUI 设置数值的滑动条_html

查看拖拽的偏移量

jqueryUI 设置数值的滑动条_html_02

可以从这个方法中获取到了小红块的拖动偏移量left，那么只要通过这个left进行计算，将计算的值赋值给右边的数字之中。

根据偏移量计算 0 - 100 的进度值

jqueryUI 设置数值的滑动条_html_03

给拖动的小红块前面加个伸缩的进度条

jqueryUI 设置数值的滑动条_jquery_04

随着前面的小红块拖拉，后面也会伸缩填充前面的进度。

完整代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
    <style type="text/css">
        *{margin:0;padding: 0;font-size: 0;}

        .wrap{
            height: 20px;
            width: 530px;
            margin:50px auto;

        }

        .outside_line{
            width: 500px;
            height: 20px;
            border:2px solid #ccc;
            display: inline-block;
        }

        .outside_line .drap_box{
            width: 20px;
            height: 20px;
            background: pink;
            float: left;            
        }
    
        .outside_line .drag_after{
            /*width: 50px;*/
            width: 0;
            height: 20px;
            background-color: pink;
            float: left;
            position: absolute;
        }

        .nums{
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            float: right;
        }

        .nums em{
            display: block;
            width: 100%;
            height: 100%;
            font-style: normal;
            text-align: center;
            color: lightblue;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function(){
            // alert( $('.nums em').html() );

            $('.drap_box').draggable({
                containment: "parent", // 限制在父级元素下拖动
                opacity: 0.6,  // 设置拖动的时候，透明度设置为0.6

                drag:function(ev,ui){
                    console.log(ui.position.left);
                    // console.log(parseInt((ui.position.left/480)*100));

                    $('.nums em').html( parseInt((ui.position.left/480)*100) );
                    
                    $(".drag_after").css({"width":ui.position.left});
                }
            })
        })
    </script>
</head>
<body>
    <div class="wrap">
        <div class="outside_line">
            <div class="drag_after"></div>
            <div class="drap_box"></div>
        </div>
        <div class="nums"><em>0</em></div>
    </div>

</body>
</html>

jqueryUI 设置数值的滑动条_jquery_05