首頁 > web前端 > js教程 > 實例程式碼講解jquery easyui動態tab頁_jquery

實例程式碼講解jquery easyui動態tab頁_jquery

WBOY
發布: 2016-05-16 15:31:42
原創
1071 人瀏覽過

透過使用 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&#63;$('#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&#63;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也要引用,浪費就產生了。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板