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>

   

插件效果

代码持续翻译中……