easyui源码翻译1.32--Window（窗口）

前言

扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。下载该插件翻译源码

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

源码

/**
 * jQuery EasyUI 1.3.2
 *
 *翻译：qq 1364386878
 */
(function ($) {
    //设置面板大小和布局
    function _resize(jq, _position) {
        var opts = $.data(jq, "window").options;
        if (_position) {
            if (_position.width) {
                opts.width = _position.width;
            }
            if (_position.height) {
                opts.height = _position.height;
            }
            if (_position.left != null) {
                opts.left = _position.left;
            }
            if (_position.top != null) {
                opts.top = _position.top;
            }
        }
        $(jq).panel("resize", opts);
    };
    //移动窗口到新位置
    function _move(jq, options) {
        var window = $.data(jq, "window");
        if (options) {
            if (options.left != null) {
                window.options.left = options.left;
            }
            if (options.top != null) {
                window.options.top = options.top;
            }
        }
        $(jq).panel("move", window.options);
        if (window.shadow) {
            window.shadow.css({
                left: window.options.left,
                top: window.options.top
            });
        }
    };
    //仅水平居中窗口
    function _hcenter(jq, IsMove) {
        var win = $.data(jq, "window");
        var opts = win.options;
        var width = opts.width;
        if (isNaN(width)) {
            width = win.window._outerWidth();
        }
        if (opts.inline) {
            var _f = win.window.parent();
            opts.left = (_f.width() - width) / 2 + _f.scrollLeft();
        } else {
            opts.left = ($(window)._outerWidth() - width) / 2 + $(document).scrollLeft();
        }
        if (IsMove) {
            _move(jq);
        }
    };
    //仅垂直居中窗口
    function _vcenter(jq, IsMove) {
        var win = $.data(jq, "window");
        var opts = win.options;
        var height = opts.height;
        if (isNaN(height)) {
            height = win.window._outerHeight();
        }
        if (opts.inline) {
            var parentwin = win.window.parent();
            opts.top = (parentwin.height() - height) / 2 + parentwin.scrollTop();
        } else {
            opts.top = ($(window)._outerHeight() - height) / 2 + $(document).scrollTop();
        }
        if (IsMove) {
            _move(jq);
        }
    };
    //初始化
    function init(jq) {
        var winD = $.data(jq, "window");
        //渲染panel
        var win = $(jq).panel($.extend({}, winD.options, {
            border: false,//定义是否显示面板边框
            doSize: true,//如果设置为true，在面板被创建的时候将重置大小和重新布局
            closed: true,//定义是否可以关闭窗口
            cls: "window",//定义是否可以关闭窗口
            headerCls: "window-header",//添加一个CSS类ID到面板头部
            bodyCls: "window-body " + (winD.options.noheader ? "window-body-noheader" : ""),
            //在面板销毁之前触发，返回false可以取消销毁操作
            onBeforeDestroy: function () {
                if (winD.options.onBeforeDestroy.call(jq) == false) {
                    return false;
                }
                if (winD.shadow) {
                    winD.shadow.remove();
                }
                if (winD.mask) {
                    winD.mask.remove();
                }
            },
            //在面板关闭之后触发
            onClose: function () {
                if (winD.shadow) {
                    winD.shadow.hide();
                }
                if (winD.mask) {
                    winD.mask.hide();
                }
                winD.options.onClose.call(jq);
            },
            //在打开面板之后触发
            onOpen: function () {
                if (winD.mask) {
                    winD.mask.css({ display: "block", zIndex: $.fn.window.defaults.zIndex++ });
                }
                if (winD.shadow) {
                    winD.shadow.css({
                        display: "block",
                        zIndex: $.fn.window.defaults.zIndex++,
                        left: winD.options.left,
                        top: winD.options.top,
                        width: winD.window._outerWidth(),
                        height: winD.window._outerHeight()
                    });
                }
                winD.window.css("z-index", $.fn.window.defaults.zIndex++);
                winD.options.onOpen.call(jq);
            },
            //在面板改变大小之后触发
            onResize: function (width, height) {
                var opts = $(this).panel("options");
                $.extend(winD.options, {
                    width: opts.width,
                    height: opts.height,
                    left: opts.left,
                    top: opts.top
                });
                if (winD.shadow) {
                    winD.shadow.css({
                        left: winD.options.left,
                        top: winD.options.top,
                        width: winD.window._outerWidth(),
                        height: winD.window._outerHeight()
                    });
                }
                winD.options.onResize.call(jq, width, height);
            },
            //在窗口最小化之后触发
            onMinimize: function () {
                if (winD.shadow) {
                    winD.shadow.hide();
                }
                if (winD.mask) {
                    winD.mask.hide();
                }
                winD.options.onMinimize.call(jq);
            },
            //在面板折叠之前触发，返回false可以终止折叠操作
            onBeforeCollapse: function () {
                if (winD.options.onBeforeCollapse.call(jq) == false) {
                    return false;
                }
                if (winD.shadow) {
                    winD.shadow.hide();
                }
            },
            //在面板展开之后触发
            onExpand: function () {
                if (winD.shadow) {
                    winD.shadow.show();
                }
                winD.options.onExpand.call(jq);
            }
        }));
        winD.window = win.panel("panel");
        if (winD.mask) {
            winD.mask.remove();
        }
        if (winD.options.modal == true) {
            winD.mask = $("<div class=\"window-mask\"></div>").insertAfter(winD.window);
            winD.mask.css({
                width: (winD.options.inline ? winD.mask.parent().width() : compatMode().width),
                height: (winD.options.inline ? winD.mask.parent().height() : compatMode().height),
                display: "none"
            });
        }
        if (winD.shadow) {
            winD.shadow.remove();
        }
        if (winD.options.shadow == true) {
            winD.shadow = $("<div class=\"window-shadow\"></div>").insertAfter(winD.window);
            winD.shadow.css({ display: "none" });
        }
        if (winD.options.left == null) {
            _hcenter(jq);
        }
        if (winD.options.top == null) {
            _vcenter(jq);
        }
        _move(jq);
        if (winD.options.closed == false) {
            win.window("open");
        }
    };
    //设置属性
    function setProperties(jq) {
        var win = $.data(jq, "window");
        //设置组件拖动
        win.window.draggable({
            handle: ">div.panel-header>div.panel-title",
            disabled: win.options.draggable == false,
            onStartDrag: function (e) {
                if (win.mask) {
                    win.mask.css("z-index", $.fn.window.defaults.zIndex++);
                }
                if (win.shadow) {
                    win.shadow.css("z-index", $.fn.window.defaults.zIndex++);
                }
                win.window.css("z-index", $.fn.window.defaults.zIndex++);
                if (!win.proxy) {
                    win.proxy = $("<div class=\"window-proxy\"></div>").insertAfter(win.window);
                }
                win.proxy.css({
                    display: "none",
                    zIndex: $.fn.window.defaults.zIndex++,
                    left: e.data.left,
                    top: e.data.top
                });
                win.proxy._outerWidth(win.window._outerWidth());
                win.proxy._outerHeight(win.window._outerHeight());
                setTimeout(function () {
                    if (win.proxy) {
                        win.proxy.show();
                    }
                }, 500);
            },
            onDrag: function (e) {
                win.proxy.css({
                    display: "block",
                    left: e.data.left,
                    top: e.data.top
                });
                return false;
            },
            onStopDrag: function (e) {
                win.options.left = e.data.left;
                win.options.top = e.data.top;
                $(jq).window("move");
                win.proxy.remove();
                win.proxy = null;
            }
        });
        //设置组件拉伸
        win.window.resizable({
            disabled: win.options.resizable == false, onStartResize: function (e) {
                win.pmask = $("<div class=\"window-proxy-mask\"></div>").insertAfter(win.window);
                win.pmask.css({
                    zIndex: $.fn.window.defaults.zIndex++,
                    left: e.data.left,
                    top: e.data.top,
                    width: win.window._outerWidth(),
                    height: win.window._outerHeight()
                });
                if (!win.proxy) {
                    win.proxy = $("<div class=\"window-proxy\"></div>").insertAfter(win.window);
                }
                win.proxy.css({
                    zIndex: $.fn.window.defaults.zIndex++,
                    left: e.data.left,
                    top: e.data.top
                });
                win.proxy._outerWidth(e.data.width);
                win.proxy._outerHeight(e.data.height);
            }, onResize: function (e) {
                win.proxy.css({ left: e.data.left, top: e.data.top });
                win.proxy._outerWidth(e.data.width);
                win.proxy._outerHeight(e.data.height);
                return false;
            }, onStopResize: function (e) {
                $.extend(win.options, {
                    left: e.data.left,
                    top: e.data.top,
                    width: e.data.width,
                    height: e.data.height
                });
                _resize(jq);
                win.pmask.remove();
                win.pmask = null;
                win.proxy.remove();
                win.proxy = null;
            }
        });
    };

    // 判断当前浏览器采用的渲染方式(兼容目前流行的全部浏览器)
    function compatMode() {
        //BackCompat：标准兼容模式关闭。
        //CSS1Compat：标准兼容模式开启。
        //当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
        //当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
        //浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
        if (document.compatMode == "BackCompat") {
            return { width: Math.max(document.body.scrollWidth, document.body.clientWidth), height: Math.max(document.body.scrollHeight, document.body.clientHeight) };
        } else {
            return { width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth), height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) };
        }
    };

    $(window).resize(function () {
        $("body>div.window-mask").css({
            width: $(window)._outerWidth(),
            height: $(window)._outerHeight()
        });
        setTimeout(function () {
            $("body>div.window-mask").css({
                // 判断当前浏览器采用的渲染方式
                width: compatMode().width,
                height: compatMode().height
            });
        }, 50);
    });

    //实例化组件
    $.fn.window = function (target, parm) {
        if (typeof target == "string") {
            var method = $.fn.window.methods[target];
            if (method) {
                return method(this, parm);
            } else {
                return this.panel(target, parm);
            }
        }
        target = target || {};
        return this.each(function () {
            var pwindow = $.data(this, "window");
            if (pwindow) {
                $.extend(pwindow.options, target);
            } else {
                pwindow = $.data(this, "window", {
                    options: $.extend({},
                        $.fn.window.defaults,
                        $.fn.window.parseOptions(this),
                        target)
                });
                if (!pwindow.options.inline) {
                    document.body.appendChild(this);
                }
            }
            init(this);
            setProperties(this);
        });
    };
    //默认方法
    $.fn.window.methods = {
        //返回属性对象
        options: function (jq) {
            var opts = jq.panel("options");
            var options = $.data(jq[0], "window").options;
            return $.extend(options, {
                closed: opts.closed,
                collapsed: opts.collapsed,
                minimized: opts.minimized,
                maximized: opts.maximized
            });
        },
        //返回外部窗口对象
        window: function (jq) {
            return $.data(jq[0], "window").window;
        },
        //返回属性对象
        resize: function (jq, parm) {
            return jq.each(function () {
                _resize(this, parm);
            });
        },
        //移动面板到一个新位置
        move: function (jq, _position) {
            return jq.each(function () {
                _move(this, _position);
            });
        },
        //仅水平居中窗口
        hcenter: function (jq) {
            return jq.each(function () {
                _hcenter(this, true);
            });
        },
        //仅垂直居中窗口
        vcenter: function (jq) {
            return jq.each(function () {
                _vcenter(this, true);
            });
        },
        //将窗口绝对居中
        center: function (jq) {
            return jq.each(function () {
                _hcenter(this);
                _vcenter(this);
                _move(this);
            });
        }
    };
    //解析器配置
    $.fn.window.parseOptions = function (target) {
        return $.extend({}, $.fn.panel.parseOptions(target),
            $.parser.parseOptions(target,
            [{
                draggable: "boolean",
                resizable: "boolean",
                shadow: "boolean",
                modal: "boolean",
                inline: "boolean"
            }]));
    };
    //默认属性和事件
    $.fn.window.defaults = $.extend({},
        $.fn.panel.defaults,
        {
            zIndex: 9000,//窗口Z轴坐标
            draggable: true,//定义是否能够拖拽窗口
            resizable: true,//定义是否能够改变窗口大小
            shadow: true,//如果设置为true，在窗体显示的时候显示阴影
            modal: false,//定义是否将窗体显示为模式化窗口
            inline: false,//定义如何布局窗口，如果设置为true，窗口将显示在它的父容器中，否则将显示在所有元素的上面
            title: "New Window",//窗口的标题文本
            collapsible: true,//定义是否显示可折叠按钮
            minimizable: true,//定义是否显示最小化按钮
            maximizable: true,//定义是否显示最大化按钮
            closable: true,//定义是否显示关闭按钮
            closed: false//定义是否可以关闭窗口
        });
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Window - 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="../../plugins2/jquery.draggable.js"></script>
    <script src="../../plugins2/jquery.resizable.js"></script>
    <script src="../../plugins2/jquery.panel.js"></script>
    <script src="../../plugins2/jquery.window.js"></script>
  <!--  <script src="../../plugins/jquery.window.js"></script>-->
</head>
<body>
    <h2>Basic Window</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Window can be dragged freely on screen.</div>
    </div>
    <div style="margin:10px 0;">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
    </div>
    <div id="w" class="easyui-window" title="Basic Window" data-options="iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">
        The window content.
    </div>
</body>
</html>

插件效果