【连载】研究EasyUI系统—Panel组件（方法和事件）

    我们来看一下panel方法和事件。

panel方法。

方法名称	参数	方法描述
options	无	返回所有属性。
panel	无	返回整个panel组件对象。
header	无	返回组件header部分的对象。
footer	无	返回组件footer部分的对象。1.4.1及以上版本支持。
body	无	返回组件body部分的对象。
setTitle	title	设置header部分的标题。
open	forceOpen	如果true，不执行onBeforeOpen事件的回调函数而直接打开panel组件。
close	forceClose	如果true，不执行onBeforeClose事件的回调函数而直接关闭panel组件。
destroy	forceDestroy	如果true，不执行onBeforeDestroy事件的回调函数而直接销毁panel组件。
clear	无	清除panel组件的内容。1.4及以上版本支持。
refresh	href	刷新组件内容。参数可以为空。
resize	options	调整组件大小和位置。
doLayout	无	设置panel组件内子组件的大小。
move	options	移动组件。
maximize	无	最大化组件。
minimize	无	最小化组件。
restore	无	将处于最大化时的组件还原至初始时的大小和位置。
collapse	animate	折叠组件，参数为“animation”，表示折叠时的动画效果。
expand	animate	展开组件，参数为“animation”，表示展开时的动画效果。

    调用refresh时可以使用参数，也可以不使用。refresh方法的参数是字符串，并且是一个url地址，组件在刷新时将会使用该url地址指向的页面作为新的内容。当然你也可以不传递参数，这样的话组件刷新时会使用初始构造panel时所使用的href属性的值。
    resize用来调整组件的大小和位置，它的参数是一个json，包含，width、height、top、left四个元素。

$("#myPanel").panel("resize", {width:100,height:100,left:20,top:30});

    doLayout设置组件内子组件的大小。其实该方法返回的是子组件的对象，用户可以对内部的子组件做相关操作。
    move方法可以将panel组件移到一个新位置，参数是一个JSON，包含top和left两个元素，用法同resize。
    collapse和expand的参数是字符串”animation”，如果指定该参数，那么在展开或折叠组件时会有动画效果，如果方法不使用参数，则不具有动画效果。

panel事件。

事件名称	参数	事件描述
onBeforeLoad	param	远程页面加载前触发，如果事件返回false，则不会加载页面。1.3.6及以上版本支持。
onLoad	无	远程页面加载完成后触发。
onLoadError	无	远程页面加载发生错误是触发。1.3.6及以上版本支持。
onBeforeOpen	无	panel组件打开前出发，如果事件返回false，则不会打开组件。
onOpen	无	panel组件打开后触发。
onBeforeClose	无	panel组件关闭前触发，如果事件返回false，则不关闭组件。
onClose	无	panel组件关闭后触发。
onBeforeDestroy	无	panel组件销毁前触发，如果事件返回false，则不销毁组件。
onDestroy	无	panel组件销毁后触发。
onBeforeCollapse	无	panel组件折叠前触发，如果事件返回false，则不折叠组件。
onCollapse	无	panel组件折叠后触发。
onBeforeExpand	无	panel组件展开前触发，如果事件返回false，则不展开组件。
onExpand	无	panel组件展开后触发。
onResize	width,height	panel组件大小调整后触发，width和height分别代表组件新的宽度和高度。
onMove	left,top	panel组件移动位置后触发，left和top分别代表组件新的左上角水平位置和垂直位置。
onMaximize	无	panel组件最大化后触发。
onRestore	无	返panel组件恢复初始大小后触发。
onMinimize	无	panel组件最小化后触发。

    panel事件有一些规律，onBeforeXXX事件和对应的onXXX事件（如onBeforeClose和onClose），触发时的事件是一样的，只是触发时机不同，前者在事件开始执行前触发，后者则是在事件执行完成后触发。这些事件都比如容易理解，也不做过多讲述，仅举一个例子简单说明。

<div id="myPanel" class="easyui-panel"></div>
<script>
    $("#myPanel").panel({
        onBeforeClose:function() {
            return false;
        }
    });
</script>

    上例代码中，因为onBeforeClose总是返回false，所以组件永远不会被关闭。其他的OnBeforeXXX事件也是一样，如果返回false，均不会执行相关事件动作。