@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内容,当它加载成功之后显示一些信息
属性
| Name | Type | Description | Default |
|---|---|---|---|
| id | string | 这个panel的id属性. | null |
| title | string | 这个标题文本是显示在panel的头部 | null |
| iconCls | string | 一个css样式来显示一个16*16 的icon在panel上 | null |
| width | number | 设置panel的宽度. | auto |
| height | number | 设置panel的高度. | auto |
| left | number | 设置panel的左侧的位置. | null |
| top | number | 设置panel的顶部的位置. | null |
| cls | string | 给panel添加一个css样式. | null |
| headerCls | string | 给panel标题添加一个样式. | null |
| bodyCls | string | 给panel的body添加css样式. | null |
| style | object |
添加一个自定义样式给panel.
代码示例改变panel的border width: <div class="easyui-panel" style="width:200px;height:100px"
data-options="style:{borderWidth:2}">
</div>
|
{} |
| fit | boolean |
当该项设置为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> |
false |
| border | boolean | 决定是否显示panel的border | true |
| doSize | boolean | 如果设置为 true,panel将在创建的时候调整大小个布局. | true |
| noheader | boolean | 如果设置为 true,panel的header将不会创建. | false |
| content | string | panel body的内容. | null |
| collapsible | boolean | 决定是否显示collapsible(可折叠)按钮. | false |
| minimizable | boolean | 决定是否显示 minimizable(最小化) 按钮. | false |
| maximizable | boolean | 决定是否显示 maximizable(最大化) 按钮. | false |
| closable | boolean | 决定是否显示 closable(可关闭) 按钮. | false |
| tools | array,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>
|
[] |
| collapsed | boolean | 决定panel是否在初始化的时候折叠 . | false |
| minimized | boolean | 决定panel是否在初始化的时候最小化. | false |
| maximized | boolean | 决定panel是否在初始化时最大化. | false |
| closed | boolean | 决定panel是否在初始化时关闭. | false |
| href | string |
一个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>
|
null |
| cache | boolean | True 将缓存从href加载的内容. | true |
| loadingMessage | string | 当从远程服务器上加载数据的时候显示这个信息在panel中. | Loading… |
| extractor | function |
定义如何从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;
}
}
|
事件
| Name | Parameters | Description |
|---|---|---|
| onLoad | none | 远程数据加载的时候触发. |
| onBeforeOpen | none | 在panel打开之前触发,如果返回false将停止打开panel. |
| onOpen | none | 当panel打开之后触发. |
| onBeforeClose | none |
在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>
|
| onClose | none | 当panel关闭之后触发. |
| onBeforeDestroy | none | 在panel销毁之前触发,该方法返回false将取消销毁. |
| onDestroy | none | 在panel销毁之后触发. |
| onBeforeCollapse | none | 在panel 折叠(collapse) 之前触发,该方法返回false将停止折叠. |
| onCollapse | none | 在panel折叠之后触发. |
| onBeforeExpand | none | 在panel展开(expand)之前触发,该方法如果返回false将停止展开. |
| onExpand | none | 在panel展开之后触发. |
| onResize | width, height |
在panel大小改变之后触发. width:新的外部的宽度(outer width) height:新的外部的高度(outer height) |
| onMove | left,top |
在panel移动之后触发. left: 新的panel的左边的位置 top: 新的panel的顶部的位置 |
| onMaximize | none | 在window已经最大化之后触发. |
| onRestore | none | 在window已经还原为原始大小之后触发. |
| onMinimize | none | 在window已经最小化之后触发. |
方法
| Name | Parameter | Description |
|---|---|---|
| options | none | 返回 options属性值 . |
| panel | none | 返回外部的panel对象. |
| header | none | 返回panel 的 header 对象. |
| body | none | 返回panel 的 body 对象. |
| setTitle | title | 设置标题文本. |
| open | forceOpen | 当forceOpen 参数设置为true的时候, panel打开将忽略onBeforeOpen回调函数. |
| close | forceClose | 当 forceClose参数设置为true的时候, panel关闭忽略onBeforeClose回调函数. |
| destroy | forceDestroy | 当 forceDestroy 参数设置为true的时候,panel销毁忽略onBeforeDestroy回调函数. |
| refresh | href |
刷新panel加载远程数据.如果传入了 'href' 参数,将会重写老的"href"属性.
示例代码: // 打开一个panel然后刷新内容.
$('#pp').panel('open').panel('refresh');
// 刷新内容和分配新的url .
$('#pp').panel('open').panel('refresh','new_content.php');
|
| resize | options |
设置panel的大小和布局 ,这个options对象包含以下属性: width: 新的panel宽度 height: 新的panel高度 left: 新的panel左边的位置 top: 新的panel的顶部的位置 代码示例: $('#pp').panel('resize',{
width: 600,
height: 400
});
|
| move | options |
移动panel到一个新的位置 . 这个options对象包含以下属性: left: 新的panel的左边的位置 top: 新的panel的顶部的位置 |
| maximize | none | 自适应panel在它的容器内. |
| minimize | none | 最小化panel. |
| restore | none | 还原最大化的panel返回到原来的大小和原来的位置. |
| collapse | animate | 折叠 panel 的 body. |
| expand | animate | 展开 panel 的 body. |
如果以上有错误信息,请指出thanks!