EasyUI学习笔记4:展现内容_ tabs插件
2015-08-12 09:58
288 查看
摘要 使用Easyui-tabs插件动态添加tab标签页,展现网页内容。
easyui
tabs
目录[-]
一、引言
二、动态添加tab页
三、给树形菜单加上事件
一、引言
笔记3已经在页面布局的左侧加入了导航菜单,本节将给菜单添加事件,点击节点后打开一个网页。首先新建一个新的页面customer.html用来管理“客户”。代码和笔记1的about.html几乎相同:?
所以方案是:利用easyui的tabs插件创建tab页,每一个标签页里使用 iframe 标签来引入子页面。
二、动态添加tab页
在笔记2中,我们已经在center区域创建了easyui-tabs插件,并命名为“tabs”即:?
?
可以看出,动态添加一个tab有三个关键参数:标题title,内容content,是否可关闭closable,tab图标icon。
考虑到,系统有非常多功能,即该段代码会被频繁使用。我们可以将代码进行简单封装,写成一个独立的函数openTab,参数title和url,来实现该功能。代码如下:
?
?
代码中exists和select都是tab插件的方法,你可以从easyui中API中发现它们,这两个方法都需要title作为参数。截图出来给大家参考,可见多看官方api和教程多重要。
代码中带有注释,剩下的相信你应该一目了然。
三、给树形菜单加上事件
接下来就是要给树形菜单加上事件,让它调用openTab方法。修改笔记3的js代码如下:?
很多事件的回调函数需要 'node' 参数,它包括下列属性:
• id:绑定到节点的标识值。
• text:要显示的文本。
• iconCls:用来显示图标的 css class。
• checked:节点是否被选中。
• state:节点状态,'open' 或 'closed'。
• attributes:绑定到节点的自定义属性。
• target:目标的 DOM 对象。
我们结合该代码、treedata .json和api中解释中我们可以了解本节js代码的逻辑:
菜单加上了单击事件onClick:treedata.json中有个自定义属性url,如果该节点有绑定该属性,当点击菜单节点时,则调用openTab函数,把节点的text的值赋值参数title,把自定义属性url值赋给参数url,从而创建tab页。然后再调用createTabContent加载url网页(customer.html)内容。
需要注意的是,上节创建的treedata.json中url值还是空的,我们需要将客户这个节点的url值改为:
?
如果该页面已经打开,点击菜单则不会重复打开,而是激活该tab页。
最后附上index.html中的完整js代码:
?
相关文章推荐
- EasyUI学习笔记3:导航菜单_ accordion和tree插件
- leetcode_Repeated DNA Sequences
- Purpose of requirePermission attribute (web.config)
- easyui学习笔记2:页面布局,layout插件
- IOS UILabel 详解
- Android详细的对话框AlertDialog.Builder使用方法
- easyui学习笔记1:搭建环境,编写hellworld
- 【POJ】 2442——Sequence【STL—优先队列】
- [LeetCode]Repeated DNA Sequence
- 关于iOS 7以后自定义UIAlertview(CustomIOS7AlertView)的用法心得
- UGUI 扩展集
- Xcode 学习之路 Interface Builder使用技巧
- NHibernate3剖析:Query篇之NHibernate.Linq增强查询
- NHibernate3剖析:Query篇之NHibernate.Linq自定义扩展
- requirejs 跨域
- iOS-Core-Animation-Advanced-Techniques 中文翻译
- UIBezierPath 和 CAShapeLayer 绘画图纸
- Android API Guides –Device Compatibility
- HDOJ-1503-Advanced Fruits
- 给EasyUI的DateBox控件添加清除button