前言

昨天发布了表格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);

View Code

示例代码

<!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>

插件效果

代码持续翻译中……

转载于:https://www.cnblogs.com/DemoLee/p/3468324.html

easyui源码翻译1.32--panel(面板)相关推荐

  1. easyui源码翻译1.32--Messager(消息窗口)

    前言 使用$.messager.defaults重写默认值对象.下载该插件翻译源码 消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...

  2. easyui源码翻译1.32--Window(窗口)

    前言 扩展自$.fn.panel.defaults.使用$.fn.window.defaults重写默认值对象.下载该插件翻译源码 窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口.默认情况下,窗 ...

  3. easyui源码翻译1.32--ValidateBox(验证框)

    前言 使用$.fn.validatebox.defaults重写默认值对象.下载该插件翻译源码 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将 ...

  4. easyui源码翻译1.32--SearchBox(搜索框)

    前言 使用$.fn.searchbox.defaults重写默认值对象.下载该插件翻译源码 搜索框提示用户需要输入搜索的值.它可以结合一个菜单,允许用户选择不同的搜索类别.在用户按下回车键或点击组件右 ...

  5. easyui源码翻译1.32--Resizable(调整大小)

    前言 使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码 源码 /*** jQuery EasyUI 1.3.2* *翻译:qq 1364386878 Resizab ...

  6. ArrayList源码翻译

    ArrayList源码翻译 简介 属性解读 初始化 添加方法 get方法 set方法 remove方法 contains方法 clone方法 总结 简介 ArrayList 是 java 集合框架中比 ...

  7. three.js源码翻译及案例(五)-GLTFLoader.js

    写在前面 Three中的加载脚本很多,但是核心思想是差不多的,就是文件用文件解析器加载,图片用图片解析器加载,然后json转换为对象,但是由于gltf格式可以自己编辑所以有的源码参考意义不大,glb及 ...

  8. jQuery Easyui 源码分析之combo组件

    /** * jQuery EasyUI 1.3.1 * 该源码完全由压缩码翻译而来,并非网络上放出的源码,请勿索要.*/ (function($) {function setSize(target, ...

  9. Vue源码翻译之渲染逻辑链

    本篇文章主要要记录说明的是,Vue在Vdom的创建上的相关细节.这也是描绘了Vue在界面的创建上的一个逻辑顺序,同时我也非常拜服作者编码的逻辑性,当然或许这么庞大复杂的编码不是一次性铸就的,我想应该也 ...

最新文章

  1. HTML中单选框的设置,和提交按钮之间的组合
  2. 根据名字,获取线程,进程。
  3. 如何解决两个相邻的span中间空隙
  4. C语言程序设计 函数递归调用示例
  5. orcale实现自定义优先级排序的SQL
  6. 插图 引用 同一行两个插图_为什么插图是产品的重要组成部分
  7. 它是真实的“盗梦空间”?在这里,一切都可能是数据
  8. 中国游戏行业观察报告
  9. 很冷门,但非常实用的 Python 库
  10. 计算机的应用可以分为几类,计算机分为哪几类专业
  11. java swing复选框大小_Java Swing界面编程(28)---复选框:JCheckBox
  12. C++中用TinyXML对XML文件进行解析
  13. 语音识别中的MFCC的提取原理和MATLAB实现
  14. 智能优化算法学习总结
  15. 京东白条技术架构进化分享,这篇总算是讲清楚了 ~
  16. 使用VirtualDub增加视频的音量
  17. 14周 上 购物案列
  18. /etc/hosts文件中的::1是什么意思
  19. 【JS】1007- JavaScript实现网页截屏的5种方法
  20. matlab可视化功能6,第6章MATLAB计算结果可视化

热门文章

  1. 微信小程序底部弹框 showActionSheet
  2. Springboot03整合SpringDataJPA访问MySQL数据库
  3. ios图片轮播 (基础篇——UIScrollView实现方式)
  4. Hive(6)-DML数据操作
  5. jmeter的master-slave模式
  6. 51nod 1013快速幂 + 费马小定理
  7. 这是我用Microsoft Word 2010 直接发布的测试用博客
  8. JAVA培训—线程同步--卖票问题
  9. 7-1 图形卡片排序游戏 (40 分)
  10. 30分钟轻松入门Spring MVC