实例代码讲解jquery easyui动态tab页
来源:互联网 发布:mac svn服务器地址 编辑:程序博客网 时间:2024/05/01 06:25
这篇文章主要介绍了实例代码讲解jquery easyui动态tab页的相关资料,需要的朋友可以参考下
通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。
function addTab(title, href,icon){ var tt = $('#tabs'); if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab tt.tabs('select', title); refreshTab({tabTitle:title,url:href}); } else { if (href){ var content = '<iframe scrolling="no" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>'; } else { var content = '未实现'; } tt.tabs('add',{ title:title, closable:true, content:content, iconCls:icon||'icon-default' }); } } /** * 刷新tab * @cfg *example: {tabTitle:'tabTitle',url:'refreshUrl'} *如果tabTitle为空,则默认刷新当前选中的tab *如果url为空,则默认以原来的url进行reload */ function refreshTab(cfg){ var refresh_tab = cfg.tabTitle?$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected'); if(refresh_tab && refresh_tab.find('iframe').length > 0){ var _refresh_ifram = refresh_tab.find('iframe')[0]; var refresh_url = cfg.url?cfg.url:_refresh_ifram.src; //_refresh_ifram.src = refresh_url; _refresh_ifram.contentWindow.location.href=refresh_url; }
以上代码简单易懂,代码就是注释,有疑问欢迎给我留言。
ps: jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”。
两者特点:
href方式加载数据的特点:
被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是HTML片段。
加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好。
当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题,后面会详细谈。
content方式加载数据的特点:
比较灵活,你可以在脚本里面拼写html代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。
可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。
使用iframe会造成客户端js重复加载,浪费资源,比如说你主页面要引用easyui的库,你的iframe也要引用,浪费就产生了。
原文链接:http://www.kubiji.cn/topic-id3658.html
0 0
- 实例代码讲解jquery easyui动态tab页
- jquery easyui tab动态导入界面
- jQuery EasyUi实现tab页
- jQuery EasyUi实现tab页
- jquery easyui tabs 在子Tab页中动态添加创建新tab页
- EasyUI 动态tab页界面小结
- EasyUI 动态tab页界面小结
- easyui动态隐藏/显示tab页
- jquery easyui 刷新 tab
- easyui 动态添加 tab
- EasyUI 动态添加tab
- easyUI使用实例讲解
- jQuery-easyui中的tab组件
- easyui动态创建tab面板
- Jquery实例-Tab页的实现
- easyui Tab页动态控制
- easyui tab页
- jquery easyUI 手风琴首页实例样例代码
- Make Menuconfig详解 (配置内核选择)
- Git ssh配置
- Android 常用框架
- 40. Combination Sum II \ 46. Permutations \ 47. Permutations II
- Python中内置数据类型list,tuple,dict,set的区别和用法
- 实例代码讲解jquery easyui动态tab页
- 骨牌铺方格
- 救济金发放 (The Dole Queue, UVa 133)
- springmvc json 数据交互
- [leetcode-排序]--148. Sort List
- centos7安装scala
- SPFA算法
- Java 10进制byte数组与16进制byte数组互转 及 在DES加解密中的使用
- 增强学习论文记录