核心提示:我们来看一下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,均不会执行相关事件动作。