Foxtable(狐表)用户栏目Web开发 → 每天进步一点(191016):不会用组件中的方法?来,我做个基础扫盲!


  共有295人关注过本帖树形打印复制链接

主题:每天进步一点(191016):不会用组件中的方法?来,我做个基础扫盲!

帅哥哟,离线,有人找我吗?
reachtone
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 一级勋章
等级:版主 帖子:1936 积分:16597 威望:0 精华:19 注册:2008/9/2 10:09:00
每天进步一点(191016):不会用组件中的方法?来,我做个基础扫盲!  发帖心情 Post By:2019/10/16 17:00:00 [只看该作者]

EasyUI组件不仅有各种属性,还同时提供了用于直接实现某些功能的方法。仍以panel面板组件为例,以下代码就是通过collapsible为true在面板上生成折叠按钮的:

以下内容为程序代码:

$('#p').panel({
     title: '面板方法演示',
     width:300,
     height:200,
     iconCls:'icon-man',
     collapsible:true
});


有了这个按钮之后,就可以点击它让面板折叠或者展开:

图片点击可在新窗口打开查看

如果你不希望手工操作,那么就可以使用方法来控制它的折叠或展开操作。关于EasyUI组件的方法使用规则,第7章有详细的说明:

图片点击可在新窗口打开查看

panel面板的折叠方法用的是collapse,它有一个可选参数,表示折叠时是否有动画效果,默认是false。那么,要直接折叠面板时,可使用以下代码:

以下内容为程序代码:

 $('#p').panel('collapse');

如果要在折叠时有一种动画效果,那么就可以这么写:

以下内容为程序代码:

 $('#p').panel('collapse',true);


如果想在折叠的同时再做一些其他的操作,也是可以的。例如:

以下内容为程序代码:

 $('#p').panel('collapse'); //使用collapse方法折叠
 $('#p').panel('setTitle','折叠了'); //使用setTitle方法重置面板标题
 $('#p').panel({iconCls:'icon-remove'}) //使用iconCls属性重置面板图标


由于这里都是对同一个对象操作的,因而也可以使用链式写法一气呵成:

以下内容为程序代码:

 $('#p').panel('collapse').panel('setTitle','折叠了').panel({iconCls:'icon-remove'});


其实,这里的后续代码如果写到onCollapse或者onExpand事件中会更合适,因为在折叠或展开时都将触发这两个事件,很显然,把重置标题或重置图标的代码放到事件中处理是最好的,不论是手工点击的折叠还是通过方法控制的折叠,事件中的代码都能正常执行,这样就能做到统一。


[此贴子已经被作者于2019/10/16 17:06:49编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
wei0769
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:五尾狐 帖子:1148 积分:11242 威望:0 精华:0 注册:2013/4/10 14:38:00
  发帖心情 Post By:2019/10/22 20:32:00 [只看该作者]

图片点击可在新窗口打开查看

建议做一个链接,很方便找到
[此贴子已经被作者于2019/10/22 20:34:50编辑过]

 回到顶部