Panel( 面板) 组件 上

一． 加载方式
//class 加载方式
<div class="easyui-panel" data-options="closable:true"
title="My Panel" style="width:500px;">
<p>内容区域</p>
</div>

//JS 加载调用
$('#box').panel({
width:500,
height:150,
title : '面板',
closable : true,
});

二． 属性列表

//属性设置

$('#box').panel({
width : 500,
height : 150,
title : '面板',
closable : true,
iconCls : 'icon-edit',
cls : 'a',
headerCls : 'b',
bodyCls : 'c',
style : {
'min-height' : '150px',
},
fit : true,
border : false,
doSize : true,
noheader : true,
content : '修改内容',
collapsible : true,
minimizable : true,
maximizable : true,
tools : '#tt',
tools : [
{
iconCls : 'icon-help',
handler : function () {
alert('help！');
},
}
],
collapsed : true,
minimized : true,
maximized : true,
closed : true,
href : 'content.php',
cache : false,
loadingMessage : '加载中...',
extractor : function (data) {
return data.substring(0,3);
},
});
<div id="tt">
<a class="icon-add" onclick="javascript:alert('add')"></a>

<a class="icon-edit" onclick="javascript:alert('edit')"></a>

<a class="icon-cut" onclick="javascript:alert('cut')"></a>
<a class="icon-help" onclick="javascript:alert('help')"></a>
</div>

三．事件列表

$('#box').panel({
width : 500,
height : 150,
title : '面板',
closable : true,
collapsible : true,

maximizable : true,
minimizable : true,
onBeforeLoad : function () {
alert('加载远程数据之前触发！');
},
onLoad : function () {
alert('加载远程数据时触发！');
},
onBeforeOpen : function () {
alert('打开面板之前触发！');
//return false;
},
onOpen : function () {
alert('打开面板之后触发！');
},
onBeforeClose : function () {
alert('关闭面板之前触发！');
//return false;
},
onClose : function () {
alert('关闭面板之后触发！');
},
onBeforeDestroy : function () {
alert('销毁面板之前触发！');
return false;
},
onDestroy : function () {
alert('销毁面板之后触发！');
},
onBeforeCollapse : function () {
alert('面板折叠之前触发！');
return false;
},
onCollapse : function () {
alert('面板折叠之后触发！');
},
onBeforeExpand : function () {
alert('面板展开之前触发！');
return false;
},
onExpand : function () {
alert('面板展开之后触发！');
},

onMaximize : function () {
alert('窗口最大化之后触发！');
},
onRestore : function () {
alert('窗口回复到原始大小后触发！');
},
onMinimize : function () {
alert('窗口最小化之后触发！');
},
onResize : function (width,height) {
alert('面板改变大小之后触发！' + width + '|' + height);
},
onMove : function (left,top) {
alert('面板移动之后触发！' + left + '|' + top);
},
});

三．方法列表

//返回属性对象
console.log($('#box').panel('options'));
//返回面板对象
console.log($('#box').panel('panel'));
//返回面板头对象
console.log($('#box').panel('header'));
//返回面板主体对象
console.log($('#box').panel('body'));
//修改面板标题
$('#box').panel('setTitle', '修改')
//跳过 onBeforeOpen 回调函数
$('#box').panel('open', true);
//跳过 onBeforeClose 回调函数
$('#box').panel('close', true);
//跳过 onBeforeDestroy 回调函数
$('#box').panel('close', true);
//刷新当前内容
$('#box').panel('refresh');
//刷新指定载入内容
$('#box').panel('refresh', 'content.php');
//设置面板的大小和布局
$('#box').panel('resize', {
width : 100,
height : 100,

left : 100,
top : 100,
});
//设置移动的坐标
$('#box').panel('move', {
left : 100,
top : 100,
});
//设置面板最大化
$('#box').panel('maximize');
//设置面板最小化
$('#box').panel('minimize');
//设置恢复最大化面板到原始的大小和位置
$('#box').panel('restore');
//设置折叠面板
$('#box').panel('collapse');
//设置展开面板
$('#box').panel('expand');
PS：我们可以使用$.fn.panel.defaults 重写默认值对象。
$.fn.panel.defaults.border = false;