面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。
1. 通过HTML标签创建面板
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| id | string | 面板的ID属性。 | null |
| title | string | 在面板头部显示的标题文本。 | null |
| iconCls | string | 设置一个16x16图标的CSS类ID显示在面板左上角。 | null |
| width | number | 设置面板宽度。 | auto |
| height | number | 设置面板高度。 | auto |
| left | number | 设置面板距离左边的位置（即X轴位置）。 | null |
| top | number | 设置面板距离顶部的位置（即Y轴位置）。 | null |
| cls | string | 添加一个CSS类ID到面板。 | null |
| headerCls | string | 添加一个CSS类ID到面板头部。 | null |
| bodyCls | string | 添加一个CSS类ID到面板正文部分。 | null |
| style | object | 添加一个当前指定样式到面板。
如下代码示例更改面板边框宽度： <div class="easyui-panel" style="width:200px;height:100px"
data-options="style:{borderWidth:2}">
</div>
|
{} |
| fit | boolean | 当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板，可以自动在父容器的最大范围内调整大小。
<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 | 定义是否显示面板边框。 | true |
| doSize | boolean | 如果设置为true，在面板被创建的时候将重置大小和重新布局。 | true |
| noheader | boolean | 如果设置为true，那么
面板工具菜单也可以通过数组定义： <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 | 定义是否在初始化的时候折叠面板。 | false |
| minimized | boolean | 定义是否在初始化的时候最小化面板。 | false |
| maximized | boolean | 定义是否在初始化的时候最大化面板。 | false |
| closed | boolean | 定义是否在初始化的时候关闭面板。 | false |
| href | string | 从URL读取远程数据并且显示到面板。注意：内容将不会被载入，直到面板打开或扩大，在创建延迟加载面板时是非常有用的：
<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，在超链接载入时缓存面板内容。 | true |
| loadingMessage | string | 在加载远程数据的时候在面板内显示一条消息。 | Loading… |
| extractor | function | 定义如何从ajax应答数据中提取内容，返回提取数据。
extractor: function(data){
var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
var matches = pattern.exec(data);
if (matches){
return matches[1]; // 仅提取主体内容
} else {
return data;
}
}
|
<div id="mypanel" class="easyui-panel" style="width:300px;height:200px;" title="My Panel" iconCls="icon-save" minimizable="true" maximizable="true" closable="true" collapsible="true" >
<p>必须要加上这个类class="easyui-panel"</p>
</div>
2. 通过js创建面板
| 事件名 | 事件参数 | 描述 |
|---|---|---|
| onLoad | none | 在加载远程数据时触发。 |
| onBeforeOpen | none | 在打开面板之前触发，返回false可以取消打开操作。 |
| onOpen | none | 在打开面板之后触发。 |
| onBeforeClose | none | 在关闭面板之前触发，返回false可以取消关闭操作。下列的面板将不能关闭。
<div class="easyui-panel" style="width:300px;height:200px;"
title="My Panel" data-options="onBeforeClose:function(){return false}">
面板将不能关闭
</div>
|
| onClose | none | 在面板关闭之后触发。 |
| onBeforeDestroy | none | 在面板销毁之前触发，返回false可以取消销毁操作。 |
| onDestroy | none | 在面板销毁之后触发。 |
| onBeforeCollapse | none | 在面板折叠之前触发，返回false可以终止折叠操作。 |
| onCollapse | none | 在面板折叠之后触发。 |
| onBeforeExpand | none | 在面板展开之前触发，返回false可以终止展开操作。 |
| onExpand | none | 在面板展开之后触发。 |
| onResize | width, height | 在面板改变大小之后触发。 width：新的宽度。 height：新的高度。 |
| onMove | left,top | 在面板移动之后触发。 left：新的左边距位置。 top：新的上边距位置。 |
| onMaximize | none | 在窗口最大化之后触发。 |
| onRestore | none | 在窗口恢复到原始大小以后触发。 |
| onMinimize | none | 在窗口最小化之后触发。 |
| 方法名 | 方法参数 | 描述 |
|---|---|---|
| options | none | 返回属性对象。 |
| panel | none | 返回面板对象。 |
| header | none | 返回面板头对象。 |
| body | none | 返回面板主体对象。 |
| setTitle | title | 设置面板头的标题文本。 |
| open | forceOpen | 在'forceOpen'参数设置为true的时候，打开面板时将跳过'onBeforeOpen'回调函数。 |
| close | forceClose | 在'forceClose'参数设置为true的时候，关闭面板时将跳过'onBeforeClose'回调函数。 |
| destroy | forceDestroy | 在'forceDestroy'参数设置为true的时候，销毁面板时将跳过'onBeforeDestory'回调函数。 |
| refresh | href | 刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性。
代码示例： // 打开面板且刷新其内容。
$('#pp').panel('open').panel('refresh');
// 刷新一个新的URL内容$('#pp').panel('open').panel('refresh','new_content.php');
|
| resize | options | 设置面板大小和布局。参数对象包含下列属性： width：新的面板宽度。 height：新的面板高度。 left：新的面板左边距位置。 top：新的面板上边距位置。 代码示例： $('#pp').panel('resize',{
width: 600,
height: 400
});
|
| move | options | 移动面板到一个新位置。参数对象包含下列属性： left：新的左边距位置。 top：新的上边距位置。 |
| maximize | none | 最大化面板到容器大小。 |
| minimize | none | 最小化面板。 |
| restore | none |
恢复最大化面板回到原来的大小和位置。
|
| collapse | animate | 折叠面板主题。 |
| expand | animate | 展开面板主体。 |
<script type="text/javascript">
$(function(){
$("#mypanel").panel({
title:'我的面板',
width:200,
height:200,
closable:true,
content:"我是面板内容"
});//创建一个面板
});
</script>
</head>
<body>
<div id="mypanel">
</div>
</body>