轻松控制EasyUI-Tab选项卡
2015-11-30 23:45
676 查看
【项目概要】
项目中前台页面用的是EasyUI样式,用户登录后,左侧是导航栏,点击导航栏下的内容,在页面右侧显示的是具体内容。界面如下图所示:
【需求说明】
目前项目组长已经实现点击左侧导航菜单下的某个选项,界面右侧出现对应的选项卡内容。而我需要完成的需求是当再次点击右侧已打开的选项卡内容,会回到对应的选项卡内容,而不是总停留在最后打开的一项。
【实现步骤】
1.点击,打开对应的选项卡,代码如下:
2.点击,加上条件判断。判断选项卡是否打开,并跳转到对应的选项卡,代码如下:
【学习收获】
1.每一个需求的提出,任务的分配,都是自己学习的机会。
2.在这一次需求实现的过程中,更多的还是API文档给予自己很大的帮助。其中,对各种控件的方法和属性都有着详细的说明,常用的也有些示例 。通过这次需求实现,至少,Tab选项卡对我来说已经不是新鲜的东西了。
3.至今,当遇到自己没有接触过的东西,我不再反感或是担心,反而是好奇而充满兴趣。因为,身边有很多巨人,方法也一定很多,根本不用担心不能实现,而主要在于自己能不能想到,敢不敢尝试。有时候,可能会花费时间较长,但这就是我们的积累过程,现在不做、不尝试,等到以后或许会花费更长的时间呢。
项目中前台页面用的是EasyUI样式,用户登录后,左侧是导航栏,点击导航栏下的内容,在页面右侧显示的是具体内容。界面如下图所示:
【需求说明】
目前项目组长已经实现点击左侧导航菜单下的某个选项,界面右侧出现对应的选项卡内容。而我需要完成的需求是当再次点击右侧已打开的选项卡内容,会回到对应的选项卡内容,而不是总停留在最后打开的一项。
【实现步骤】
1.点击,打开对应的选项卡,代码如下:
//需要显示的具体信息的URL地址 var content = '<iframe scrolling="auto" frameborder="0" src=" ' + url + '" style="width:100%;height:100%;"></ifrmae>'; //添加选项卡 $('#tabs').tabs('add', { //选项卡标题 title: title, //选项卡内容 content: content, //选项卡面板显示关闭按钮 closable: true });
2.点击,加上条件判断。判断选项卡是否打开,并跳转到对应的选项卡,代码如下:
//如果选项卡已经打开 if($('#tabs').tabs('exists',title)){ //跳转到指定的选项卡页面 $('#tabs').tabs('select', title); }
【学习收获】
1.每一个需求的提出,任务的分配,都是自己学习的机会。
2.在这一次需求实现的过程中,更多的还是API文档给予自己很大的帮助。其中,对各种控件的方法和属性都有着详细的说明,常用的也有些示例 。通过这次需求实现,至少,Tab选项卡对我来说已经不是新鲜的东西了。
3.至今,当遇到自己没有接触过的东西,我不再反感或是担心,反而是好奇而充满兴趣。因为,身边有很多巨人,方法也一定很多,根本不用担心不能实现,而主要在于自己能不能想到,敢不敢尝试。有时候,可能会花费时间较长,但这就是我们的积累过程,现在不做、不尝试,等到以后或许会花费更长的时间呢。
相关文章推荐
- Undo Related Wait Events & Known Issues (文档 ID 1575701.1)
- WebKit之HTMLTreeBuilder类的解析框架
- PowerDesigner15在生成SQL时报错Generation aborted due to errors detected during the verification of the mod
- Marklogic学习 由浅入深(3)—— XML、XPath、XQuery
- UISearchBar 搜索框
- UIView 转 UIImage
- UIImagePickerController 图像选取器--在iPhone中调用照相机、照片库—IOS开发
- UIPickerView 选取器(滚轮)—IOS开发
- UESTC 1014 The King and King boss 鸽巢原理
- 从头认识java-11.2 "+"与StringBuilder
- 黑马程序员_javaGUI综合部件布局与事件处理
- Masonry + UIView Animations 注意事项
- Duilib源码分析(四)绘制管理器—CPaintManagerUI
- 理解 Android Build 系统
- 【LEETCODE】62-Unique Paths
- 快速排序--quickSort
- UICollectionView
- 容器总结——array、vector、deque
- 动态修改UINavigationBar的背景色
- description The resource identified by this request is only capable of generating responses with cha