核心提示:我们来看一下panel方法和事件。panel方法。 方法名称 参数 方法描述 options 无 返回所有属性。 panel 无 返回整个panel组件对象。 header ...
我们来看一下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),触发时的事件是一样的,只是触发时机不同,前者在事件开始执行前触发,后者则是在事件执行完成后触发。这些事件都比如容易理解,也不做过多讲述,仅举一个例子简单说明。
<p id="myPanel" class="easyui-panel"></p>
<script>
$("#myPanel").panel({
onBeforeClose:function() {
return false;
}
});
</script>
上例代码中,因为onBeforeClose总是返回false,所以组件永远不会被关闭。其他的OnBeforeXXX事件也是一样,如果返回false,均不会执行相关事件动作。


