jquery easyui tab加載內容的幾種方法

轉：http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB

 

jQuery Easyui 的tabs插件有兩種方式加載某個tab(標籤頁)上的內容：「href遠程請求」和「content本地內容」，本文就兩種方式的優缺點進行簡單分析和思考。

• 二者特色：
• href方式加載數據的特色：
• content方式加載數據的特色：
• 簡單總結：
• href常見問題：
• 1.href只加載目標URL的html片斷
• 2.短暫的頁面混亂：
• 3.html片斷的easyui組件相關腳本莫名地報錯：
• 4.放在window裏面表單驗證的提示信息會亂串：
• 5.兩次或者屢次加載遠程數據問題：

二者特色：

href方式加載數據的特色：

1. 被加載的頁面只有body元素內部的內容纔會被加載，也就是jQuery的ajax請求的只是html片斷。

2. 加載遠程url時有遮罩效果，也就是「等待中……」效果，用戶體驗較好。

3. 當加載的頁面佈局較爲複雜，或者有較多的js腳本須要運行的時候，編碼每每就須要謹慎了，容易出問題，後面會詳細談。

content方式加載數據的特色：

1. 比較靈活，你能夠在腳本里面拼寫html代碼，而後賦值給tab的content屬性，不過這種寫法會使得代碼易讀性變差。

2. 能夠把iframe賦給content，把一個iframe嵌入也就沒有什麼不能完成的了。

3. 使用iframe會形成客戶端js重複加載，浪費資源，好比說你主頁面要引用easyui的庫，你的iframe也要引用，浪費就產生了。

簡單總結：

根據上面的分析，使用content的方式較爲簡潔，並且能夠引入iframe來搞定一切，缺點也很明顯，系統較爲複雜的話，將帶來極大地資源浪費，只適合較爲簡單的頁面系統；

而href方式則對編碼能力要求的稍微高一些，由於html的片斷，稍微不注意就會處理很差，不過熟練的話，我的以爲href方式是不二之選。

href常見問題：

1.href只加載目標URL的html片斷

這個特性是由jQuery封裝的ajax請求處理機制所決定的，因此目標URL頁面裏不須要有html,head,body等標籤，即便有這些元素，也會被忽略，因此放在head標籤裏面的任何腳本也不會被引入或者執行。

2.短暫的頁面混亂：

href連接的頁面比較複雜的時候，easyui對其渲染每每須要一個較長的過程，這時候，加載進來的html片斷毫無佈局能夠，過一會自動會好，這時候easyui已經完成對它的渲染。如何避免這個混亂的過程呢，還得靠easyui的一個基礎插件——解析器(Parser)。

Parser有個onComplete事件，這個事件就是指easyui對頁面完成渲染時觸發，這樣思路就很清晰了：用一個div遮罩住讓被加載進來的html片斷，在onComplete事件中，讓這個div淡出，這時候渲染好的html片斷就能美人出浴了，同時還整了個等待中的效果，一箭雙鵰。這樣要作兩件事：

第一是在要加載的html片斷中放一個遮罩用的div：

<div id="loading" style="position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #DDDDDB; text-align: center; padding-top: 20%;"></div>

第二是在被加載的html片斷尾部處理相關事件：

function  show(){   

     $( "#loading" ).fadeOut( "normal" ,  function (){   

         $( this ).remove();   

     });   

}       

var  delayTime;   

$.parser.onComplete =  function (){   

     if (delayTime)    

         clearTimeout(delayTime);   

         delayTime = setTimeout(show,500);   

     }

 

須要注意的是，若是多個tab頁面都使用了onComplete事件，當前定義的會覆蓋以前定義的。其實每次easyui渲染完成均會調用onComplete事件，因此每打開一個包含easyui控件的tab頁，onComplete事件就會被調用。

3.html片斷的easyui組件相關腳本莫名地報錯：

其實這個現象是跟第一個現象的緣由同樣的，easyui完成對html片斷渲染須要必定的時間，頁面越複雜，耗時越長，這時候難以免html存在的腳本存在對easyui某些插件的調用，好比datagrid等，這個時候就會報錯，解決方案同上，將這些腳本放到onComplete事件裏處理，也就保證了渲染完成前，不會被執行。

4.放在window裏面表單驗證的提示信息會亂串：

這個現象應該是插件自身的bug，對位置的計算沒有考慮到這些特殊的事情，解決方式能夠投機取巧，在打開window後，讓表單不符合驗證的input得到焦點就能夠了。

5.兩次或者屢次加載遠程數據問題：

官方已經說明在1.2.5的版本中已經修正了這個Bug，可是仍是有很多人反應會出現兩次加載遠程數據的現象，甚至在1.2.6版本中也會遇到，若是您確實遇到這種狀況了，請按如下方式檢查：

• 遠程數據返回的數據中是否包含class=」easyui-tabs」或者class=」easyui-datagrid」這樣的樣式了， 若是有的話，easyui在獲取html片斷後會自動渲染，這時候已經對遠程數據源作了一次請求；

• 您是否又用javascript去$(‘#tabsId’).tabs({…});或者$(‘#tabsId’).datagrid({…});去綁定事件或者設置屬性，其實等於又一次渲染了對應控件，會再次請求遠程數據。

爲何會這樣，看看源碼便知道了：

$.fn.tabs =  function (options, param){   

     if  ( typeof  options ==  'string' ) {   

         //這個地方的分支很清楚，只有當options爲字符串的時候，纔是直接調用控件自己提供的方法。   

         return  $.fn.tabs.methods[options]( this , param);   

     }   

     //若是options不是字符串，直接構造控件，inxing渲染。   

     options = options || {};   

     return  this .each( function (){   

         var  state = $.data( this ,  'tabs' );   

             var  opts;   

             if  (state) {   

                 opts = $.extend(state.options, options);   

                 state.options = opts;   

             }   

             else  {   

                 $.data( this ,  'tabs' , {   

                     options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions( this ), options),   

                     tabs: wrapTabs( this ),   

                     selectHis: []   

                 });   

             }   

             buildButton( this );   

             setProperties( this );   

             setSize( this );   

             initSelectTab( this );   

         });   

     };

 

所以，直接傳入對象的話，全部控件都會從新構造的，tabs屢次加載的問題大多數就是這麼發生的。