您现在的位置:首页 >> 前端 >> 内容

研究EasyUI系统—Panel组件(方法和事件)

时间:2017/1/12 10:31:54 点击:

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

Tags:研究 究E EA AS 
作者:网络 来源:凝视着那片海...