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);

View Code

 

示例代码

<!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>

View Code

 

插件效果