有意思的拖拉条

最新推荐文章于 2023-02-08 21:25:57 发布

转载最新推荐文章于 2023-02-08 21:25:57 发布 · 522 阅读

javascript 同时被 2 个专栏收录

34 篇文章

订阅专栏

jquery

20 篇文章

订阅专栏

转载于：http://www.treejs.cn/v3/main.php#_zTreeInfo
这是一个ztree树插件demo中的拖动条
ps:由于ztree用的jquery老版本，所以删减了一些代码

效果

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    css 
    <style type="text/css">
    div.ruler {
        height: 20px;
        width: 220px;
        background-color: #f0f6e4;
        border: 1px solid #333;
        margin-bottom: 5px;
        cursor: pointer;
    }
    div.ruler div.cursor {
        height: 20px;
        width: 30px;
        background-color: #3C6E31;
        color: white;
        text-align: right;
        padding-right: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div id="ruler" class="ruler" title="可调整的节点树">
        <div id="cursor" class="cursor">5000</div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../jq/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    var ruler = {
        doc: null,   //$(document)
        ruler: null,
        cursor: null,
        minCount: 5000,
        count: 5000,
        stepCount:500,
        minWidth: 30, //最小30px
        maxWidth: 215,// 最大215px ,padding-right:5px  父级宽度220px
        init: function() {
            ruler.doc = $(document);
            ruler.ruler = $("#ruler");
            ruler.cursor = $("#cursor");
            if (ruler.ruler) {
                    ruler.ruler.bind("mousedown", ruler.onMouseDown); //鼠标按下触发 
                }
            },
            onMouseDown: function(e) {
                ruler.drawRuler(e, true);  
                ruler.doc.bind("mousemove", ruler.onMouseMove); 
                ruler.doc.bind("mouseup", ruler.onMouseUp);  
                ruler.doc.bind("selectstart", ruler.onSelect); //阻止选择页面中的文字
                $("body").css("cursor", "pointer"); // 变成小手
            },
            onMouseMove: function(e) {
                ruler.drawRuler(e); //长度变化
                return false;
            },
            onMouseUp: function(e) { //解绑事件
                $("body").css("cursor", "auto");
                ruler.doc.unbind("mousemove", ruler.onMouseMove);
                ruler.doc.unbind("mouseup", ruler.onMouseUp);
                ruler.doc.unbind("selectstart", ruler.onSelect);
                ruler.drawRuler(e);
            },
            onSelect: function (e) {
                return false;
            }, //禁止选择
            getCount: function(end) {
                var start = ruler.ruler.offset().left+1;  // 外部的x坐标（+1是因为offset根据边框外边计算）
                var c = Math.max((end - start), ruler.minWidth); 
                c = Math.min(c, ruler.maxWidth);//c的值为ruler.minWidth和ruler.maxWidth的值 超过最大则用最大，超过最小则用最小值（这个值是内部的长度）
                return {width:c, count:(c - ruler.minWidth)*ruler.stepCount + ruler.minCount};
                //count值为显示的数字
            },
            drawRuler: function(e, animate) {
                var c = ruler.getCount(e.clientX);  //传递鼠标目前的x坐标
                ruler.cursor.stop(); //停止动画效果
                if (!animate) {
                    ruler.cursor.css({width:c.width}); //没有动画效果
                } else {
                    ruler.cursor.animate({width:c.width}, {duration: "fast",easing: "swing", complete:null});
                }//有动画效果
                ruler.count = c.count;
                ruler.cursor.text(c.count);
            }
        }
        $(document).ready(function(){
            ruler.init("ruler");
        });
    </script>

小小改造变为一个可拖拉的进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    css 
    <style type="text/css">
    div.ruler {
        height: 20px;
        width: 220px;
        background-color: #f0f6e4;
        border: 1px solid #333;
        cursor: pointer;
    }
    div.ruler div.cursor {
        height: 20px;
        width: 0px;
        background-color: #3C6E31;
        color: white;
        text-align: right;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div id="ruler" class="ruler" title="可调整的节点树">
        <div id="cursor" class="cursor"></div>
    </div>
    <p>完成百分比<span class="total" id="total"></span></p>
</body>
</html>
<script type="text/javascript" src="../../jq/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    var ruler = {
        doc: null,   //$(document)
        ruler: null,
        cursor: null,
        total: null,
        minCount: 0,
        count: 0,
        stepCount:0,
        minWidth: 0, //最小30px
        maxWidth: 220,//父级宽度220px
        init: function() {
            ruler.doc = $(document);
            ruler.ruler = $("#ruler");
            ruler.cursor = $("#cursor");
            ruler.total = $("#total");

            if (ruler.ruler) {
                    ruler.ruler.bind("mousedown", ruler.onMouseDown); //鼠标按下触发 
                }
            },
            onMouseDown: function(e) {
                ruler.drawRuler(e, true);  
                ruler.doc.bind("mousemove", ruler.onMouseMove); 
                ruler.doc.bind("mouseup", ruler.onMouseUp);  
                ruler.doc.bind("selectstart", ruler.onSelect); //阻止选择页面中的文字
                $("body").css("cursor", "pointer"); // 变成小手
            },
            onMouseMove: function(e) {
                ruler.drawRuler(e); //长度变化
                return false;
            },
            onMouseUp: function(e) { //解绑事件
                $("body").css("cursor", "auto");
                ruler.doc.unbind("mousemove", ruler.onMouseMove);
                ruler.doc.unbind("mouseup", ruler.onMouseUp);
                ruler.doc.unbind("selectstart", ruler.onSelect);
                ruler.drawRuler(e);
            },
            onSelect: function (e) {
                return false;
            }, //禁止选择
            getCount: function(end) {
                var start = ruler.ruler.offset().left+1;  // 外部的x坐标（+1是因为offset根据边框外边计算）
                var c = Math.max((end - start), ruler.minWidth); 
                c = Math.min(c, ruler.maxWidth);//c的值为ruler.minWidth和ruler.maxWidth的值 超过最大则用最大，超过最小则用最小值（这个值是内部的长度）
                return {width:c};
                //count值为显示的数字
            },
            drawRuler: function(e, animate) {
                var c = ruler.getCount(e.clientX);  //传递鼠标目前的x坐标
                ruler.cursor.stop(); //停止动画效果
                if (!animate) {
                    ruler.cursor.css({width:c.width}); //没有动画效果
                } else {
                    ruler.cursor.animate({width:c.width}, {duration: "fast",easing: "swing", complete:null});
                }//有动画效果
               ruler.total.text( Math.round((c.width/ruler.maxWidth) * 100));
            }
        }
        $(document).ready(function(){
            ruler.init("ruler");
        });
    </script>