這篇文章主要介紹了實(shí)例代碼講解jquery easyui動(dòng)態(tài)tab頁(yè)的相關(guān)資料,需要的朋友可以參考下

通過(guò)使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要調(diào)用 'add' 方法即可。

1. function addTab(title, href,icon){  
2. var tt = $('#tabs');  
3. if (tt.tabs('exists', title)){//如果tab已經(jīng)存在,則選中并刷新該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 = '未實(shí)現(xiàn)';  
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為空，則默認(rèn)刷新當(dāng)前選中的tab  
25. *如果url為空，則默認(rèn)以原來(lái)的url進(jìn)行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. } 

以上代碼簡(jiǎn)單易懂，代碼就是注釋?zhuān)幸蓡?wèn)歡迎給我留言。

ps： jQuery Easyui 的tabs插件有兩種方式加載某個(gè)tab(標(biāo)簽頁(yè))上的內(nèi)容：“href遠(yuǎn)程請(qǐng)求”和“content本地內(nèi)容”。

兩者特點(diǎn)：

href方式加載數(shù)據(jù)的特點(diǎn)：

被加載的頁(yè)面只有body元素內(nèi)部的內(nèi)容才會(huì)被加載，也就是jQuery的ajax請(qǐng)求的只是html片段。

加載遠(yuǎn)程url時(shí)有遮罩效果，也就是“等待中……”效果，用戶(hù)體驗(yàn)較好。

當(dāng)加載的頁(yè)面布局較為復(fù)雜，或者有較多的js腳本需要運(yùn)行的時(shí)候，編碼往往就需要謹(jǐn)慎了，容易出問(wèn)題，后面會(huì)詳細(xì)談。

content方式加載數(shù)據(jù)的特點(diǎn)：

比較靈活，你可以在腳本里面拼寫(xiě)html代碼，然后賦值給tab的content屬性，不過(guò)這種寫(xiě)法會(huì)使得代碼易讀性變差。

可以把iframe賦給content，把一個(gè)iframe嵌入也就沒(méi)有什么不能完成的了。

使用iframe會(huì)造成客戶(hù)端js重復(fù)加載，浪費(fèi)資源，比如說(shuō)你主頁(yè)面要引用easyui的庫(kù)，你的iframe也要引用，浪費(fèi)就產(chǎn)生了。