原地址:http://blog.csdn.net/superdog007/article/details/8225518
jQuery Easyui 的tabs插件有兩種方式加載某個tab(標簽頁)上的內容:“href遠程請求”和“content本地內容”,本文就兩種方式的優缺點進行簡單分析和思考。
兩者特點:
href方式加載數據的特點:
- 被加載的頁面只有body元素內部的內容才會被加載,也就是jQuery的ajax請求的只是html片段。
- 加載遠程url時有遮罩效果,也就是“等待中……”效果,用戶體驗較好。
- 當加載的頁面布局較為復雜,或者有較多的js腳本需要運行的時候,編碼往往就需要謹慎了,容易出問題,后面會詳細談。
content方式加載數據的特點:
- 比較靈活,你可以在腳本里面拼寫html代碼,然后賦值給tab的content屬性,不過這種寫法會使得代碼易讀性變差。
- 可以把iframe賦給content,把一個iframe嵌入也就沒有什么不能完成的了。
- 使用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片段尾部處理相關事件:
1 function show(){
2 $("#loading").fadeOut("normal", function(){
3 $(this).remove();
4 });
5 }
6 var delayTime;
7 $.parser.onComplete = function(){
8 if(delayTime)
9 clearTimeout(delayTime);
10 delayTime = setTimeout(show,500);
11 }
需要注意的是,如果多個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){
2 if (typeof options == 'string') {
3 //這個地方的分支很清楚,只有當options為字符串的時候,才是直接調用控件本身提供的方法。
4 return $.fn.tabs.methods[options](this, param);
5 }
6 //如果options不是字符串,直接構造控件,inxing渲染。
7 options = options || {};
8 return this.each(function(){
9 var state = $.data(this, 'tabs');
10 var opts;
11 if (state) {
12 opts = $.extend(state.options, options);
13 state.options = opts;
14 }
15 else {
16 $.data(this, 'tabs', {
17 options: $.extend({}, $.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),
18 tabs: wrapTabs(this),
19 selectHis: []
20 });
21 }
22 buildButton(this);
23 setProperties(this);
24 setSize(this);
25 initSelectTab(this);
26 });
27 };
因此,直接傳入對象的話,所有控件都會重新構造的,tabs多次加載的問題大多數就是這么發生的。