实例代码讲解jquery easyui动态tab页

这篇文章主要介绍了实例代码讲解jquery easyui动态tab页的相关资料,需要的朋友可以参考下

通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。

1. function addTab(title, href,icon){  
2. var tt = $('#tabs');  
3. if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab  
4. tt.tabs('select', title);  
5. refreshTab({tabTitle:title,url:href});  
6. } else {  
7. if (href){  
8. var content = '<iframe scrolling="no" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>';  
9. } else {  
10. var content = '未实现';  
11. }  
12. tt.tabs('add',{  
13. title:title,  
14. closable:true,  
15. content:content,  
16. iconCls:icon||'icon-default' 
17. });  
18. }  
19. }  
20. /**  
21. * 刷新tab  
22. * @cfg  
23. *example: {tabTitle:'tabTitle',url:'refreshUrl'}  
24. *如果tabTitle为空，则默认刷新当前选中的tab  
25. *如果url为空，则默认以原来的url进行reload  
26. */ 
27. function refreshTab(cfg){  
28. var refresh_tab = cfg.tabTitle?$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected');  
29. if(refresh_tab && refresh_tab.find('iframe').length > 0){  
30. var _refresh_ifram = refresh_tab.find('iframe')[0];  
31. var refresh_url = cfg.url?cfg.url:_refresh_ifram.src;  
32. //_refresh_ifram.src = refresh_url;  
33. _refresh_ifram.contentWindow.location.href=refresh_url;  
34. } 

以上代码简单易懂，代码就是注释，有疑问欢迎给我留言。

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也要引用，浪费就产生了。