第九章：Panel（面板）组件
学习要点：
加载方式属性列表事件列表方法列表
一、加载方式：
1.class加载方式
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<div class="easyui-panel" style="width:40px" title="面板" data-options="closable:true">
<p>内容区域</p>
</div>
</html>
2.JS调用
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<!--
<div class="easyui-panel" style="width:40px" title="面板" data-options="closable:true">
<p>内容区域</p>
</div>
-->
<div id="box">
<p>内容区域</p>
</div>
</html>
$(function(){
$('#box').panel({
title:'面板',
});
});
二、属性列表：
Panel属性
属性名值说明idstring面板的ID值。默认为nulltitlestring面板显示的标题文本。默认为nulliconClsstring设置一个16*16图标的CSS类ID显示在面板左上角。默认为nullwidthnumber设置面板宽度。默认值autoheightnumber设置面板高度。默认值autoleftnumber设置面板距离左边的位置（即x轴位置），默认为nulltopnumber设置面板距离顶部的位置（即y轴位置），默认为nullclsstring添加一个CSS类ID到面板，默认为nullheaderClsstring添加一个CSS类ID到面板头部，默认为nullbodyClsstring添加一个CSS类ID到面板正文部分，默认为nullstylesubject添加一个当前指定样式到面板。默认为{}fitboolean当设置为true的时候面板大小将自适应父容器。默认为falseborderboolean定义是否显示面板边框，默认为truedoSizeboolean如果设置为true在面板别创建的时候将重置大小和重新布局。默认值为true。noheaderboolean如果设置为true，将不会创建面板标题，默认为falsecontentstring面板那主体内容，默认为nullcollapsibleboolean定义是否显示可折叠按钮。默认为falseminimizableboolean定义是否显示最小化按钮。默认为falsemaximizableboolean定义是否显示最大化按钮。默认为falsecloseableboolean定义是否显示关闭按钮toolsarray,selector自定义工具菜单，可用值：1.数组，每一个元素都包含'iconCls'和'handler' 属性。2.指向工作菜单的选择器。默认为[]collapsedboolean定义是否在初始化的时候折叠面板。默认为falseminimizedboolean定义是否在初始化的时候最小化面板。默认为falsemaximizedboolean定义是否在初始化的时候最大化面板。默认为falseclosedboolean定义是否在初始化的时候关闭面板。默认为falsehrefstring从URL读取远程数据并显示到面板。默认为nullcacheboolean如果为true，在超链接载入时缓存面板内容。默认为trueloadingMessagestring在载入远程数据的时候在模板内显示一条信息。默认值为loading……extractorfunction定义如何从ajax应答数据中提取内容，返回提取数据。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
<p>内容区域</p>
</div>
<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>
</div>
</body>
</html>
$(function(){
$('#box').panel({
id:'pox',
title:'面板',
width:500,
height:150,
iconCls:'icon-search',
//left:100,
//top:100,
cls:'a',
headerCls:'b',
bodyCls:'c',
style:function(){
'min-height':'200px',
},
//fit:true,
//boder:false,
//doSize:false,
//noheader:true,
//content:'修改了',
//collapsible:true,
//minimizable:true,
//maximizable:true,
closable:true,
tools:'#tt',
tools:[{
iconCls:'icon-help',
headerCls:function(){
alert('help');
},
},{
}],
//collapsed:true,
//minimized:true,
//maximized:true,
//colsed:true,
href:'content.php',
loadingMessage:'加载中……',
extractor:function(data){
return data.substring(0,3);
//alert(data);
}
});
//$('#box').panel('panel').css('position','absolute');
});
<?php
//content.php
sleep(3);
echo 123;
?>
三、事件列表：
Panel事件
事件名传参说明onBeforeLoadnone在加载远程数据之前触发。onLoadnone在加载远程数据时触发。onBeforeOpennone在打开面板之前触发，返回false可以打开操作。onOpennone在打开面板之后触发。onBeforeClose none在关闭面板之前触发，返回false可以取消关闭操作。onClosenone 在面板关闭之后触发。onbeforeDestroynone在面板销毁之前触发，返回false可以取消销毁操作。onDestroynone在面板销毁之后触发。onBeforeCollapsenone在面板折叠之前触发，返回false可以终止折叠操作。onCollapsenone在面板折叠之后触发。onBeforeExpandnone在面板展开之前触发，返回false可以终止展开操作。onExpandnone 在面板展开之后触发。onResizewidth,height在面板改变大小之后触发，width：新的宽度，height：新的高度onMoveleft，top 在面板移动之后触发。left：新的左边距位置，top：新的上边距位置onMaximizenone在窗口最大化之后触发。onRestorenone在窗口恢复到原始大小以后触发onMinimizenone在窗口最小化之后触发。
四、方法列表：
Panel方法
方法名传参说明optionsnone返回属性对象panelnone返回面板对象headernone返回面板头对象bodynone返回面板主体对象setTitletitle设置面板头的标题文本openforceOpen在'forceOpen'参数设置为true的时候，打开面板时将跳过'onBeforeOpen'回调函数。closeforceClose在'forceClose'参数设置为true的时候，关闭面板时将跳过'onBeforeClose'回调函数。destoryforceDestory在'forceDestory'参数设置为true的时候，销毁面板时将跳过'onBeforeDestory'回调函数refreshhref刷新面板来装载远程数据。如果'href'属性有了新的配置。它将重写旧的'href'属性。resizeoptions设置面板大小和布局。参数对象包含下列属性：width：新的面板宽度。height：新的面板高度。left：新的面板左边距位置。top：新的面板上边距位置。moveoptions移动面板到一个新的位置，参数对象包含下列属性：left：新的左边距位置，top：新的上边距位置。maximizenone最大化面板到容器大小。minimizenone最小化面板。restorenone恢复最大化面板回到原来的大小和位置。collapseanimate折叠面板主题expandanimate展开面板主题
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
<p>内容区域</p>
</div>
<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>
</div>
</body>
</html>
<?php
//content.php
sleep(3);
echo 'abc';
?>
$(function(){
$('#box').panel({
id:'pox',
title:'面板',
width:500,
height:150,
iconCls:'icon-search',
//left:100,
//top:100,
cls:'a',
headerCls:'b',
bodyCls:'c',
style:function(){
'min-height':'200px',
},
//fit:true,
//boder:false,
//doSize:false,
//noheader:true,
//content:'修改了',
//collapsible:true,
//minimizable:true,
//maximizable:true,
closable:true,
//tools:'#tt',
/*
tools:[{
iconCls:'icon-help',
headerCls:function(){
alert('help');
},
},{
}],
*/
tools:[{
iconCls:'icon-reload',
headerCls:function(){
//alert('help');
$('#box').panel('refresh');
},
},{
}],
//collapsed:true,
//minimized:true,
//maximized:true,
//colsed:true,
href:'content.php',
loadingMessage:'加载中……',
/*
extractor:function(data){
return data.substring(0,3);
//alert(data);
},
*/
/*
onBeforeLoad:function(){
alert('在远程加载之前触发！');
return false; //取消远程加载
},
onLoad:function(){
alert('在远程加载之后触发！');
},
onBeforeOpen:function(){
alert('打开之前触发！');
return false; //取消打开
},
onOpen:function(){
alert('打开之后触发！');
},
onBeforeClose:function(){
alert('关闭之前触发！');
return false; //取消关闭
},
onOpen:function(){
alert('关闭之后触发！');
},
onBeforeDestory:function(){
alert('销毁之前触发！');
return false; //取消销毁
},
onDestory: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);
},
*/
/*
onBeforeOpen:function(){
alert('打开之前触发！');
//return false; //取消打开
},
*/
});
//$('#box').panel('panel').css('position','absolute');
//$('#box').panel('destory');
/*
$(document).click(function(){
$('#box').panel('resize',{
'width':600,
'height':300,
});
$(document).click(function(){
$('#box').panel('move',{
'left':600,
'top':300,
});
*/
//console.log($('#box').panel('options'));
//console.log($('#box').panel('panel'));
//console.log($('#box').panel('header'));
//console.log($('#box').panel('body'));
//$('#box').panel('setTitle','标题');
//$('#box').panel('open',true);
//$('#box').panel('close');
//$('#box').panel('destory');
//$('#box').panel('maximize');
//$('#box').panel('restore');
//$('#box').panel('minimize');
//$('#box').panel('collspse');
//$('#box').panel('expand');
});
});
作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102853690
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载
