easyui源碼翻譯1.32--panel(面板)

前言

        昨天發布了表格datagrid的翻譯源碼 ,easyui的許多插件有依賴關系  比如datagrid 的渲染需要panel、resizable、linkbutton、pagination   今天則翻譯面板的源碼來看看，面板比較簡單，也不依賴其他的插件。面板作為承載其它內容的容器。這是構建其他組件的基礎（比如：layout,tabs,accordion等）。它還提供了折疊、關閉、最大化、最小化和自定義行為。面板可以很容易地嵌入到web頁面的任何位置  插件翻譯源碼下載地址

 

源碼

/**
 * jQuery EasyUI 1.3.2
 * 
 *翻譯：qq 1364386878
 */
(function ($) {
    //移除對象
    function removeNode(panel) {
        panel.each(function () {
            $(this).remove();
            if ($.browser.msie) {
                this.outerHTML = "";
            }
        });
    };
    //設置面板大小和布局
    function _resize(jq, parm) {
        var options = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        var header = panel.children("div.panel-header");
        var pbody = panel.children("div.panel-body");
        if (parm) {
            if (parm.width) {
                options.width = parm.width;
            }
            if (parm.height) {
                options.height = parm.height;
            }
            if (parm.left != null) {
                options.left = parm.left;
            }
            if (parm.top != null) {
                options.top = parm.top;
            }
        }
        options.fit ? $.extend(options, panel._fit()) : panel._fit(false);
        panel.css({
            left: options.left,
            top: options.top
        });
        if (!isNaN(options.width)) {
            panel._outerWidth(options.width);
        } else {
            panel.width("auto");
        }
        header.add(pbody)._outerWidth(panel.width());
        if (!isNaN(options.height)) {
            panel._outerHeight(options.height);
            pbody._outerHeight(panel.height() - header._outerHeight());
        } else {
            pbody.height("auto");
        }
        panel.css("height", "");
        options.onResize.apply(jq, [options.width, options.height]);
        panel.find(">div.panel-body>div").triggerHandler("_resize");
    };
    //移動面板到一個新位置
    function _move(jq, parm) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        if (parm) {
            if (parm.left != null) {
                opts.left = parm.left;
            }
            if (parm.top != null) {
                opts.top = parm.top;
            }
        }
        panel.css({ left: opts.left, top: opts.top });
        opts.onMove.apply(jq, [opts.left, opts.top]);
    };
    //渲染面板
    function wrapPanel(target) {
        $(target).addClass("panel-body");
        var panel = $("<div class=\"panel\"></div>").insertBefore(target);
        panel[0].appendChild(target);
        panel.bind("_resize", function () {
            var opts = $.data(target, "panel").options;
            if (opts.fit == true) {
                _resize(target);
            }
            return false;
        });
        return panel;
    };
    //添加頭部設置
    function addHeader(jq) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        if (opts.tools && typeof opts.tools == "string") {
            panel.find(">div.panel-header>div.panel-tool .panel-tool-a").appendTo(opts.tools);
        }
        removeNode(panel.children("div.panel-header"));
        if (opts.title && !opts.noheader) {
            var header = $("<div class=\"panel-header\"><div class=\"panel-title\">" + opts.title + "</div></div>").prependTo(panel);
            if (opts.iconCls) {
                header.find(".panel-title").addClass("panel-with-icon");
                $("<div class=\"panel-icon\"></div>").addClass(opts.iconCls).appendTo(header);
            }
            var tool = $("<div class=\"panel-tool\"></div>").appendTo(header);
            tool.bind("click", function (e) {
                e.stopPropagation();
            });
            if (opts.tools) {
                if (typeof opts.tools == "string") {
                    $(opts.tools).children().each(function () {
                        $(this).addClass($(this).attr("iconCls")).addClass("panel-tool-a").appendTo(tool);
                    });
                } else {
                    for (var i = 0; i < opts.tools.length; i++) {
                        var t = $("<a href=\"javascript:void(0)\"></a>").addClass(opts.tools[i].iconCls).appendTo(tool);
                        if (opts.tools[i].handler) {
                            t.bind("click", eval(opts.tools[i].handler));
                        }
                    }
                }
            }
            if (opts.collapsible) {
                $("<a class=\"panel-tool-collapse\" href=\"javascript:void(0)\"></a>").appendTo(tool).bind("click", function () {
                    if (opts.collapsed == true) {
                        expandPanel(jq, true);
                    } else {
                        _collapse(jq, true);
                    }
                    return false;
                });
            }
            if (opts.minimizable) {
                $("<a class=\"panel-tool-min\" href=\"javascript:void(0)\"></a>").appendTo(tool).bind("click", function () {
                    _minimize(jq);
                    return false;
                });
            }
            if (opts.maximizable) {
                $("<a class=\"panel-tool-max\" href=\"javascript:void(0)\"></a>").appendTo(tool).bind("click", function () {
                    if (opts.maximized == true) {
                        _restore(jq);
                    } else {
                        _maximize(jq);
                    }
                    return false;
                });
            }
            if (opts.closable) {
                $("<a class=\"panel-tool-close\" href=\"javascript:void(0)\"></a>").appendTo(tool).bind("click", function () {
                    _close(jq);
                    return false;
                });
            }
            panel.children("div.panel-body").removeClass("panel-body-noheader");
        } else {
            panel.children("div.panel-body").addClass("panel-body-noheader");
        }
    };

    //刷新面板來裝載遠程數據。如果'href'屬性有了新配置，它將重寫舊的'href'屬性
    function _refresh(jq) {
        var panel = $.data(jq, "panel");
        var opts = panel.options;
        if (opts.href) {
            if (!panel.isLoaded || !opts.cache) {
                panel.isLoaded = false;
                _destroy2(jq); //銷毀控件
                if (opts.loadingMessage) {
                    $(jq).html($("<div class=\"panel-loading\"></div>").html(opts.loadingMessage));
                }
                $.ajax({
                    url: opts.href,
                    cache: false,
                    dataType: "html",
                    success: function (result) {
                        init(opts.extractor.call(jq, result));
                        opts.onLoad.apply(jq, arguments);
                        panel.isLoaded = true;
                    }
                });
            }
        } else {
            if (opts.content) {
                if (!panel.isLoaded) {
                    _destroy2(jq);
                    init(opts.content);
                    panel.isLoaded = true;
                }
            }
        }
        function init(target) {
            $(jq).html(target);
            if ($.parser) {
                $.parser.parse($(jq));
            }
        };
    };
    //銷毀控件
    function _destroy2(target) {
        var t = $(target);
        t.find(".combo-f").each(function () {
            $(this).combo("destroy");
        });
        t.find(".m-btn").each(function () {
            $(this).menubutton("destroy");
        });
        t.find(".s-btn").each(function () {
            $(this).splitbutton("destroy");
        });
    };
    //調整
    function _resize2(target) {
        $(target).find("div.panel:visible,div.accordion:visible,div.tabs-container:visible,div.layout:visible").each(function () {
            $(this).triggerHandler("_resize", [true]);
        });
    };
    //在'forceOpen'參數設置為true的時候，打開面板時將跳過'onBeforeOpen'回調函數
    function _open(jq, forceOpen) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        if (forceOpen != true) {
            if (opts.onBeforeOpen.call(jq) == false) {
                return;
            }
        }
        panel.show();
        opts.closed = false;
        opts.minimized = false;
        var tool = panel.children("div.panel-header").find("a.panel-tool-restore");
        if (tool.length) {
            opts.maximized = true;
        }
        opts.onOpen.call(jq);
        if (opts.maximized == true) {
            opts.maximized = false;
            _maximize(jq);
        }
        if (opts.collapsed == true) {
            opts.collapsed = false;
            _collapse(jq);
        }
        if (!opts.collapsed) {
            _refresh(jq);
            _resize2(jq);
        }
    };
    //在'forceClose'參數設置為true的時候，關閉面板時將跳過'onBeforeClose'回調函數。
    function _close(jq, forceClose) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        if (forceClose != true) {
            if (opts.onBeforeClose.call(jq) == false) {
                return;
            }
        }
        panel._fit(false);
        panel.hide();
        opts.closed = true;
        opts.onClose.call(jq);
    };
    //在'forceDestroy'參數設置為true的時候，銷毀面板時將跳過'onBeforeDestory'回調函數
    function _destroy(jq, forceDestroy) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        if (forceDestroy != true) {
            if (opts.onBeforeDestroy.call(jq) == false) {
                return;
            }
        }
        _destroy2(jq);
        removeNode(panel);
        opts.onDestroy.call(jq);
    };
    //折疊面板主題
    function _collapse(jq, animate) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        var pbody = panel.children("div.panel-body");
        var header = panel.children("div.panel-header").find("a.panel-tool-collapse");
        if (opts.collapsed == true) {
            return;
        }
        pbody.stop(true, true);
        if (opts.onBeforeCollapse.call(jq) == false) {
            return;
        }
        header.addClass("panel-tool-expand");
        if (animate == true) {
            pbody.slideUp("normal", function () {
                opts.collapsed = true;
                opts.onCollapse.call(jq);
            });
        } else {
            pbody.hide();
            opts.collapsed = true;
            opts.onCollapse.call(jq);
        }
    };
    //展開面板主體
    function expandPanel(jq, animate) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        var pbody = panel.children("div.panel-body");
        var tool = panel.children("div.panel-header").find("a.panel-tool-collapse");
        if (opts.collapsed == false) {
            return;
        }
        pbody.stop(true, true);
        if (opts.onBeforeExpand.call(jq) == false) {
            return;
        }
        tool.removeClass("panel-tool-expand");
        if (animate == true) {
            pbody.slideDown("normal", function () {
                opts.collapsed = false;
                opts.onExpand.call(jq);
                _refresh(jq);
                _resize2(jq);
            });
        } else {
            pbody.show();
            opts.collapsed = false;
            opts.onExpand.call(jq);
            _refresh(jq);
            _resize2(jq);
        }
    };
    //最大化面板到容器大小
    function _maximize(jq) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        var tool = panel.children("div.panel-header").find("a.panel-tool-max");
        if (opts.maximized == true) {
            return;
        }
        tool.addClass("panel-tool-restore");
        if (!$.data(jq, "panel").original) {
            $.data(jq, "panel").original = {
                width: opts.width,
                height: opts.height,
                left: opts.left,
                top: opts.top,
                fit: opts.fit
            };
        }
        opts.left = 0;
        opts.top = 0;
        opts.fit = true;
        _resize(jq);
        opts.minimized = false;
        opts.maximized = true;
        opts.onMaximize.call(jq);
    };
    //最小化面板
    function _minimize(jq) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        panel._fit(false);
        panel.hide();
        opts.minimized = true;
        opts.maximized = false;
        opts.onMinimize.call(jq);
    };
    //恢復最大化面板回到原來的大小和位置
    function _restore(jq) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        var tool = panel.children("div.panel-header").find("a.panel-tool-max");
        if (opts.maximized == false) {
            return;
        }
        panel.show();
        tool.removeClass("panel-tool-restore");
        $.extend(opts, $.data(jq, "panel").original);
        _resize(jq);
        opts.minimized = false;
        opts.maximized = false;
        $.data(jq, "panel").original = null;
        opts.onRestore.call(jq);
    };
    //設置邊框
    function setBorder(jq) {
        var opts = $.data(jq, "panel").options;
        var panel = $.data(jq, "panel").panel;
        var header = $(jq).panel("header");
        var pbody = $(jq).panel("body");
        panel.css(opts.style);
        panel.addClass(opts.cls);
        if (opts.border) {
            header.removeClass("panel-header-noborder");
            pbody.removeClass("panel-body-noborder");
        } else {
            header.addClass("panel-header-noborder");
            pbody.addClass("panel-body-noborder");
        }
        header.addClass(opts.headerCls);
        pbody.addClass(opts.bodyCls);
        if (opts.id) {
            $(jq).attr("id", opts.id);
        } else {
            $(jq).attr("id", "");
        }
    };
    //設置標題
    function _setTitle(jq, title) {
        $.data(jq, "panel").options.title = title;
        $(jq).panel("header").find("div.panel-title").html(title);
    };
    var TO = false;
    var resized = true;

    $(window).unbind(".panel").bind("resize.panel", function () {
        if (!resized) {
            return;
        }
        if (TO !== false) {
            clearTimeout(TO);
        }
        TO = setTimeout(function () {
            resized = false;
            var playout = $("body.layout");
            if (playout.length) {
                playout.layout("resize");
            } else {
                $("body").children("div.panel,div.accordion,div.tabs-container,div.layout").triggerHandler("_resize");
            }
            resized = true;
            TO = false;
        }, 200);
    });
    //實例化組建 面板
    $.fn.panel = function (target, parm) {
        if (typeof target == "string") {
            return $.fn.panel.methods[target](this, parm);
        }
        target = target || {};
        return this.each(function () {
            var panel = $.data(this, "panel");
            var opts;
            if (panel) {
                opts = $.extend(panel.options, target);
                panel.isLoaded = false;
            } else {
                opts = $.extend({}, $.fn.panel.defaults, $.fn.panel.parseOptions(this), target);
                $(this).attr("title", "");
                panel = $.data(this, "panel", { options: opts, panel: wrapPanel(this), isLoaded: false });
            }
            addHeader(this);
            setBorder(this);
            if (opts.doSize == true) {
                panel.panel.css("display", "block");
                _resize(this);
            }
            if (opts.closed == true || opts.minimized == true) {
                panel.panel.hide();
            } else {
                _open(this);
            }
        });
    };

    //默認方法
    $.fn.panel.methods = {
        //返回屬性對象
        options: function (jq) {
            return $.data(jq[0], "panel").options;
        },
        //返回面板對象
        panel: function (jq) {
            return $.data(jq[0], "panel").panel;
        },
        //返回面板頭對象
        header: function (jq) {
            return $.data(jq[0], "panel").panel.find(">div.panel-header");
        },
        //返回面板主體對象
        body: function (jq) {
            return $.data(jq[0], "panel").panel.find(">div.panel-body");
        },
        //設置面板頭的標題文本
        setTitle: function (jq, title) {
            return jq.each(function () {
                _setTitle(this, title);
            });
        },
        //在'forceOpen'參數設置為true的時候，打開面板時將跳過'onBeforeOpen'回調函數
        open: function (jq, forceOpen) {
            return jq.each(function () {
                _open(this, forceOpen);
            });
        },
         //在'forceClose'參數設置為true的時候，關閉面板時將跳過'onBeforeClose'回調函數
        close: function (jq, forceClose) {
            return jq.each(function () {
                _close(this, forceClose);
            });
        },
        //在'forceDestroy'參數設置為true的時候，銷毀面板時將跳過'onBeforeDestory'回調函數
        destroy: function (jq, forceDestroy) {
            return jq.each(function () {
                _destroy(this, forceDestroy);
            });
        },
        //刷新面板來裝載遠程數據。如果'href'屬性有了新配置，它將重寫舊的'href'屬性
        refresh: function (jq, href) {
            return jq.each(function () {
                $.data(this, "panel").isLoaded = false;
                if (href) {
                    $.data(this, "panel").options.href = href;
                }
                _refresh(this);
            });
        },
        //設置面板大小和布局。參數對象包含下列屬性： width：新的面板寬度。  height：新的面板高度。left：新的面板左邊距位置。top：新的面板上邊距位置
        resize: function (jq, options) {
            return jq.each(function () {
                _resize(this, options);
            });
        },
        //移動面板到一個新位置。參數對象包含下列屬性：   left：新的左邊距位置。  top：新的上邊距位置
        move: function (jq, options) {
            return jq.each(function () {
                _move(this, options);
            });
        },
        //最大化面板到容器大小
        maximize: function (jq) {
            return jq.each(function () {
                _maximize(this);
            });
        },
        //最小化面板
        minimize: function (jq) {
            return jq.each(function () {
                _minimize(this);
            });
        },
        //恢復最大化面板回到原來的大小和位置
        restore: function (jq) {
            return jq.each(function () {
                _restore(this);
            });
        },
        //折疊面板主題    
        collapse: function (jq, animate) {
            return jq.each(function () {
                _collapse(this, animate);
            });
        },
        //展開面板主體
        expand: function (jq, animate) {
            return jq.each(function () {
                expandPanel(this, animate);
            });
        }
    };
    //解析器配置
    $.fn.panel.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.parser.parseOptions(target,
            ["id", "width", "height", "left", "top", "title", "iconCls", "cls", "headerCls", "bodyCls", "tools", "href",
                { cache: "boolean", fit: "boolean", border: "boolean", noheader: "boolean" },
                { collapsible: "boolean", minimizable: "boolean", maximizable: "boolean" },
                { closable: "boolean", collapsed: "boolean", minimized: "boolean", maximized: "boolean", closed: "boolean" }]),
                { loadingMessage: (t.attr("loadingMessage") != undefined ? t.attr("loadingMessage") : undefined) });
    };
    //面板的默認屬性和事件
    $.fn.panel.defaults = {
        id: null,//面板的ID屬性
        title: null,   //在面板頭部顯示的標題文本
        iconCls: null,//設置一個16x16圖標的CSS類ID顯示在面板左上角
        width: "auto",//設置面板寬度
        height: "auto",//設置面板高度
        left: null,//設置面板距離左邊的位置（即X軸位置）
        top: null,//設置面板距離頂部的位置（即Y軸位置）
        cls: null,//添加一個CSS類ID到面板
        headerCls: null,//添加一個CSS類ID到面板頭部
        bodyCls: null,//添加一個CSS類ID到面板正文部分
        style: {},//添加一個當前指定樣式到面板
        href: null,//從URL讀取遠程數據並且顯示到面板。注意：內容將不會被載入，直到面板打開或擴大，在創建延遲加載面板時是非常有用的：
        cache: true,//如果為true，在超鏈接載入時緩存面板內容
        fit: false,//當設置為true的時候面板大小將自適應父容器。下面的例子顯示了一個面板，可以自動在父容器的最大范圍內調整大小
        border: true,//定義是否顯示面板邊框
        doSize: true,//如果設置為true，在面板被創建的時候將重置大小和重新布局
        noheader: false,//如果設置為true，那么將不會創建面板標題
        content: null,//面板主體內容
        collapsible: false,//定義是否顯示可折疊按鈕
        minimizable: false,//定義是否顯示最小化按鈕
        maximizable: false,//定義是否顯示最大化按鈕
        closable: false,//定義是否顯示關閉按鈕
        collapsed: false,//定義是否在初始化的時候折疊面板
        minimized: false,//定義是否在初始化的時候最小化面板
        maximized: false,//定義是否在初始化的時候最大化面板
        closed: false,//定義是否在初始化的時候關閉面板
        tools: null,//自定義工具菜單，可用值： 1) 數組，每個元素都包含'iconCls'和'handler'屬性。2) 指向工具菜單的選擇器。面板工具菜單可以聲明在已經存在的<div>標簽上
        loadingMessage: "Loading...",//在加載遠程數據的時候在面板內顯示一條消息
        extractor: function (data) {//定義如何從ajax應答數據中提取內容，返回提取數據
            var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
            var matches = pattern.exec(data);
            if (matches) {
                return matches[1];
            } else {
                return data;
            }
        },
        //在加載遠程數據時觸發
        onLoad: function () {
        },
        //在打開面板之前觸發，返回false可以取消打開操作
        onBeforeOpen: function () {
        },
        //在打開面板之后觸發
        onOpen: function () {
        },
        //在關閉面板之前觸發，返回false可以取消關閉操作。下列的面板將不能關閉
        onBeforeClose: function () {
        },
        //在面板關閉之后觸發
        onClose: function () {
        },
        //在面板銷毀之前觸發，返回false可以取消銷毀操作
        onBeforeDestroy: function () {
        },
        //在面板銷毀之后觸發
        onDestroy: function () {
        },
        //在面板改變大小之后觸發 width：新的寬度。        height：新的高度
        onResize: function (width, height) {
        },
        //在面板移動之后觸發。   left：新的左邊距位置。     top：新的上邊距位置
        onMove: function (left, top) {
        },
        //在窗口最大化之后觸發
        onMaximize: function () {
        },
        //在窗口恢復到原始大小以后觸發
        onRestore: function () {
        },
        //在窗口最小化之后觸發
        onMinimize: function () {
        },
        //在面板折疊之前觸發，返回false可以終止折疊操作
        onBeforeCollapse: function () {
        },
        //在面板展開之前觸發，返回false可以終止展開操作
        onBeforeExpand: function () {
        },
        //在面板折疊之后觸發
        onCollapse: function () {
        },
        //在面板展開之后觸發
        onExpand: function () {
        }
    };
})(jQuery);

 

示例代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Panel - 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.panel.js"></script>
</head>
<body>
    <h2>Basic Panel</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>The panel is a container for other components or elements.</div>
    </div>
    <div style="margin:10px 0;">
        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
    </div>
    <div id="p" class="easyui-panel" title="Basic Panel" style="width:500px;height:200px;padding:10px;">
        <p style="font-size:14px">jQuery EasyUI framework help you build your web page easily.</p>
        <ul>
            <li>easyui is a collection of user-interface plugin based on jQuery.</li>
            <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
            <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
            <li>complete framework for HTML5 web page.</li>
            <li>easyui save your time and scales while developing your products.</li>
            <li>easyui is very easy but powerful.</li>
        </ul>
    </div>
</body>
</html>

   

插件效果

代碼持續翻譯中……