easyui源码翻译1.32--Resizable（调整大小）

前言

使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码

源码

/**
 * jQuery EasyUI 1.3.2
 *
 *翻译：qq 1364386878  Resizable（调整大小）
 */
(function ($) {
    var resizable = false;
    //创建控件
    $.fn.resizable = function (options, param) {

        if (typeof options == "string") {
            return $.fn.resizable.methods[options](this, param);
        }
        //初始化函数
        function resize(e) {
            var resizeData = e.data;
            var opts = $.data(resizeData.target, "resizable").options;
            if (resizeData.dir.indexOf("e") != -1) {
                var width = resizeData.startWidth + e.pageX - resizeData.startX;
                width = Math.min(Math.max(width, opts.minWidth), opts.maxWidth);
                resizeData.width = width;
            }
            if (resizeData.dir.indexOf("s") != -1) {
                var height = resizeData.startHeight + e.pageY - resizeData.startY;
                height = Math.min(Math.max(height, opts.minHeight), opts.maxHeight);
                resizeData.height = height;
            }
            if (resizeData.dir.indexOf("w") != -1) {
                resizeData.width = resizeData.startWidth - e.pageX + resizeData.startX;
                if (resizeData.width >= opts.minWidth && resizeData.width <= opts.maxWidth) {
                    resizeData.left = resizeData.startLeft + e.pageX - resizeData.startX;
                }
            }
            if (resizeData.dir.indexOf("n") != -1) {
                resizeData.height = resizeData.startHeight - e.pageY + resizeData.startY;
                if (resizeData.height >= opts.minHeight && resizeData.height <= opts.maxHeight) {
                    resizeData.top = resizeData.startTop + e.pageY - resizeData.startY;
                }
            }
        };
        //设置对象位置
        function applySize(e) {
            var resizeData = e.data;
            var target = resizeData.target;
            $(target).css({
                left: resizeData.left,
                top: resizeData.top
            });
            $(target)._outerWidth(resizeData.width)._outerHeight(resizeData.height);
        };

        function doDown(e) {
            resizable = true;
            $.data(e.data.target, "resizable").options.onStartResize.call(e.data.target, e);
            return false;
        };
        function doMove(e) {
            resize(e);
            if ($.data(e.data.target, "resizable").options.onResize.call(e.data.target, e) != false) {
                applySize(e);
            }
            return false;
        };

        function doUp(e) {
            resizable = false;
            resize(e, true);
            applySize(e);
            $.data(e.data.target, "resizable").options.onStopResize.call(e.data.target, e);
            $(document).unbind(".resizable");
            $("body").css("cursor", "");
            return false;
        };
        return this.each(function () {
            var opts = null;
            var state = $.data(this, "resizable");
            if (state) {
                $(this).unbind(".resizable");
                opts = $.extend(state.options, options || {});
            } else {
                opts = $.extend({}, $.fn.resizable.defaults, $.fn.resizable.parseOptions(this), options || {});
                $.data(this, "resizable", { options: opts });
            }
            if (opts.disabled == true) {
                return;
            }
            //绑定事件
            $(this).bind("mousemove.resizable", { target: this }, function (e) {
                if (resizable) {
                    return;
                }
                var dir = getDirection(e);
                if (dir == "") {
                    $(e.data.target).css("cursor", "");
                } else {
                    $(e.data.target).css("cursor", dir + "-resize");
                }
            }).bind("mouseleave.resizable", { target: this }, function (e) {
                $(e.data.target).css("cursor", "");
            }).bind("mousedown.resizable", { target: this }, function (e) {
                var dir = getDirection(e);
                if (dir == "") {
                    return;
                }
                //获取样式值
                function getCssValue(css) {
                    var val = parseInt($(e.data.target).css(css));
                    if (isNaN(val)) {
                        return 0;
                    } else {
                        return val;
                    }
                };
                var _13 = { target: e.data.target, dir: dir, startLeft: getCssValue("left"), startTop: getCssValue("top"), left: getCssValue("left"), top: getCssValue("top"), startX: e.pageX, startY: e.pageY, startWidth: $(e.data.target).outerWidth(), startHeight: $(e.data.target).outerHeight(), width: $(e.data.target).outerWidth(), height: $(e.data.target).outerHeight(), deltaWidth: $(e.data.target).outerWidth() - $(e.data.target).width(), deltaHeight: $(e.data.target).outerHeight() - $(e.data.target).height() };
                $(document).bind("mousedown.resizable", _13, doDown);
                $(document).bind("mousemove.resizable", _13, doMove);
                $(document).bind("mouseup.resizable", _13, doUp);
                $("body").css("cursor", dir + "-resize");
            });

            function getDirection(e) {
                var tt = $(e.data.target);
                var dir = "";
                var offset = tt.offset();
                var width = tt.outerWidth();
                var height = tt.outerHeight();
                var edge = opts.edge;
                if (e.pageY > offset.top && e.pageY < offset.top + edge) {
                    dir += "n";
                } else {
                    if (e.pageY < offset.top + height && e.pageY > offset.top + height - edge) {
                        dir += "s";
                    }
                }
                if (e.pageX > offset.left && e.pageX < offset.left + edge) {
                    dir += "w";
                } else {
                    if (e.pageX < offset.left + width && e.pageX > offset.left + width - edge) {
                        dir += "e";
                    }
                }
                var handles = opts.handles.split(",");
                for (var i = 0; i < handles.length; i++) {
                    var handle = handles[i].replace(/(^\s*)|(\s*$)/g, "");
                    if (handle == "all" || handle == dir) {
                        return dir;
                    }
                }
                return "";
            };
        });
    };
    //默认方法
    $.fn.resizable.methods = {
        //返回调整大小属性
        options: function (jq) {
            return $.data(jq[0], "resizable").options;
        },
        //启用调整大小功能
        enable: function (jq) {
            return jq.each(function () {
                $(this).resizable({ disabled: false });
            });
        },
        //禁用调整大小功能
        disable: function (jq) {
            return jq.each(function () {
                $(this).resizable({ disabled: true });
            });
        }
    };
    //解析器配置
    $.fn.resizable.parseOptions = function (target) {
        var t = $(target);
        return $.extend({},
            $.parser.parseOptions(target, ["handles", { minWidth: "number", minHeight: "number", maxWidth: "number", maxHeight: "number", edge: "number" }]),
            { disabled: (t.attr("disabled") ? true : undefined) });
    };
    //默认属性+事件
    $.fn.resizable.defaults = {
        disabled: false,//如果为true，则禁用大小调整
        handles: "n, e, s, w, ne, se, sw, nw, all",//声明调整方位,'n'=北,'e'=东,'s'=南等
        minWidth: 10,//当调整大小时候的最小宽度
        minHeight: 10,//当调整大小时候的最小高度
        maxWidth: 10000,//当调整大小时候的最大宽度
        maxHeight: 10000,//当调整大小时候的最大高度
        edge: 5,//边框边缘大小
        //在开始改变大小的时候触发
        onStartResize: function (e) {
        },
        //在调整大小期间触发。当返回false的时候，不会实际改变DOM元素大小
        onResize: function (e) {
        },
        //在停止改变大小的时候触发
        onStopResize: function (e) {
        }
    };
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Basic Resizable - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script src="../../plugins2/jquery.parser.js"></script>
    <script src="../../plugins/jquery.draggable.js"></script>
    <script src="../../plugins2/jquery.resizable.js"></script>
</head>
<body>
    <h2>Basic Resizable</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click on the edge of box and move the edge to resize the box.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="width:500px;height:150px;border:1px solid #ccc;">
        <div style="padding:20px">Resize Me（拉伸）</div>
    </div>
    <div id="dd" class="easyui-draggable easyui-resizable" data-options="handle:'#mytitle'" style="width:250px;height:150px;border:1px solid #ccc">
        <div id="mytitle" style="background:#ddd;padding:5px;">Title</div>
        <div style="padding:20px">Drag and Resize Me(可拖动可拉伸)</div>
    </div>
</body>
</html>

插件效果