easyUI Panel

来源：互联网发布：windows系统语言对照表编辑：程序博客网时间：2024/06/06 19:27

@author YHC

$.fn.panel.defaults覆盖默认值;

panel是使用最为其他内容的一个容器,是一个用于构建其他组件的基础组件,例如layout,tabs,accordion,等等.也提供内置的collapsible(可折叠的)

closable(可关闭的),maximizable(可最大化),minimizable(可最小化的) 行为,和一些自定义行为,panel可以很容易的嵌入网页的任何位置.

使用示例:

创建panel

1.通过标记创建panel

从标记创建panel非常简单,仅仅只需要添加"easyui-panel"样式给div标记

<div id="p" class="easyui-panel" title="My Panel"           style="width:500px;height:150px;padding:10px;background:#fafafa;"          data-options="iconCls:'icon-save',closable:true,                  collapsible:true,minimizable:true,maximizable:true">      <p>panel content.</p>      <p>panel content.</p>  </div>

2.以编程的方式创建panel

让我们创建panel工具,在她的右上角

<div id="p" style="padding:10px;">      <p>panel content.</p>      <p>panel content.</p>  </div>    $('#p').panel({    width:500,    height:150,    title: 'My Panel',    tools: [{      iconCls:'icon-add',      handler:function(){alert('new')}    },{      iconCls:'icon-save',      handler:function(){alert('save')}    }]  });

移动panel

调用move方法,移动panel到一个新的位置

$('#p').panel('move',{    left:100,    top:100  });

加载类容:

让我们通过ajax加载panel内容,当它加载成功之后显示一些信息

属性

NameTypeDescriptionDefaultidstring这个panel的id属性.nulltitlestring这个标题文本是显示在panel的头部 nulliconClsstring一个css样式来显示一个16*16 的icon在panel上nullwidthnumber设置panel的宽度.autoheightnumber设置panel的高度.autoleftnumber设置panel的左侧的位置.nulltopnumber设置panel的顶部的位置.nullclsstring给panel添加一个css样式.nullheaderClsstring给panel标题添加一个样式.nullbodyClsstring给panel的body添加css样式.nullstyleobject添加一个自定义样式给panel.

代码示例改变panel的border width:

<div class="easyui-panel" style="width:200px;height:100px"data-options="style:{borderWidth:2}"></div>

{}fitboolean当该项设置为true时设置panel的大小自适应父容器, 下面的示例展示,他将自动适应父容器内部最大尺寸

<div style="width:200px;height:100px;padding:5px"><div class="easyui-panel" style="width:200px;height:100px"data-options="fit:true,border:false">Embedded Panel</div></div>

falseborderboolean决定是否显示panel的bordertruedoSizeboolean如果设置为 true,panel将在创建的时候调整大小个布局.truenoheaderboolean如果设置为 true,panel的header将不会创建.falsecontentstringpanel body的内容.nullcollapsibleboolean决定是否显示collapsible(可折叠)按钮.falseminimizableboolean决定是否显示 minimizable(最小化) 按钮.falsemaximizableboolean决定是否显示 maximizable(最大化) 按钮.falseclosableboolean决定是否显示 closable(可关闭) 按钮.falsetoolsarray,selector自定义工具, 可用值:
1) 一个数组,每个元素包含iconCls和handler属性.
2) 一个选择器并且指明为panel tool

panel的工具,可以使用存在的div元素声明:

<div class="easyui-panel" style="width:300px;height:200px"title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"></div><div id="tt"><a href="#" class="icon-add" onclick="javascript:alert('add')"></a><a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a></div>

panel的tool也可以通过一个数组定义 :

<div class="easyui-panel" style="width:300px;height:200px"title="My Panel" data-options="iconCls:'icon-ok',tools:[{iconCls:'icon-add',handler:function(){alert('add')}},{iconCls:'icon-edit',handler:function(){alert('edit')}}]"></div>

[]collapsedboolean决定panel是否在初始化的时候折叠 .falseminimizedboolean决定panel是否在初始化的时候最小化.falsemaximizedboolean决定panel是否在初始化时最大化.falseclosedboolean决定panel是否在初始化时关闭.falsehrefstring一个URL去加载远程服务器端数据然后显示到panel中. 注意,这个类容不会加载知道panel打开(open)和展开(expand).这个对于创建一个懒加载的panel是非常有用的:

<div id="pp" class="easyui-panel" style="width:300px;height:200px"data-options="href='get_content.php',closed:true"></div><a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>

nullcachebooleanTrue 将缓存从href加载的内容.trueloadingMessagestring当从远程服务器上加载数据的时候显示这个信息在panel中.Loading…extractorfunction定义如何从ajax 的响应内容中如何提取内容, 返回提取后的信息.

extractor: function(data){var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;var matches = pattern.exec(data);if (matches){return matches[1];// only extract body content} else {return data;}}

事件

NameParametersDescriptiononLoadnone远程数据加载的时候触发.onBeforeOpennone在panel打开之前触发,如果返回false将停止打开panel.onOpennone当panel打开之后触发.onBeforeClosenone在panel关闭之前触发, 该方法如果返回false将取消关闭. 下面声明的这个panel将不能关闭.

<div class="easyui-panel" style="width:300px;height:200px;"title="My Panel" data-options="onBeforeClose:function(){return false}">The panel cannot be closed.</div>

onClosenone当panel关闭之后触发.onBeforeDestroynone在panel销毁之前触发,该方法返回false将取消销毁.onDestroynone在panel销毁之后触发.onBeforeCollapsenone在panel 折叠(collapse) 之前触发,该方法返回false将停止折叠.onCollapsenone在panel折叠之后触发.onBeforeExpandnone在panel展开(expand)之前触发,该方法如果返回false将停止展开.onExpandnone在panel展开之后触发.onResizewidth, height在panel大小改变之后触发.
width:新的外部的宽度(outer width)
height:新的外部的高度(outer height)onMoveleft,top在panel移动之后触发.
left: 新的panel的左边的位置
top: 新的panel的顶部的位置onMaximizenone在window已经最大化之后触发.onRestorenone在window已经还原为原始大小之后触发.onMinimizenone在window已经最小化之后触发.

方法

NameParameterDescriptionoptionsnone返回 options属性值 .panelnone返回外部的panel对象.headernone返回panel 的 header 对象.bodynone返回panel 的 body 对象.setTitletitle设置标题文本.openforceOpen当forceOpen 参数设置为true的时候, panel打开将忽略onBeforeOpen回调函数.closeforceClose当 forceClose参数设置为true的时候, panel关闭忽略onBeforeClose回调函数.destroyforceDestroy当 forceDestroy 参数设置为true的时候,panel销毁忽略onBeforeDestroy回调函数.refreshhref刷新panel加载远程数据.如果传入了 'href' 参数,将会重写老的"href"属性.

示例代码:

// 打开一个panel然后刷新内容.$('#pp').panel('open').panel('refresh');// 刷新内容和分配新的url .$('#pp').panel('open').panel('refresh','new_content.php');

resizeoptions设置panel的大小和布局 ,这个options对象包含以下属性:
width: 新的panel宽度
height: 新的panel高度
left: 新的panel左边的位置
top: 新的panel的顶部的位置

代码示例:

$('#pp').panel('resize',{width: 600,height: 400});

moveoptions移动panel到一个新的位置 . 这个options对象包含以下属性:
left: 新的panel的左边的位置
top: 新的panel的顶部的位置maximizenone自适应panel在它的容器内.minimizenone最小化panel.restorenone还原最大化的panel返回到原来的大小和原来的位置.collapseanimate折叠 panel 的 body.expandanimate展开 panel 的 body.

@author YHC

如果以上有错误信息,请指出thanks!