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>

 

插件效果