前言
昨天发布了表格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 = { 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显示在面板左上角 "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[^>]*>((.|[ ])*)</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="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>
插件效果
代码持续翻译中……