衆所周知,jQuery Easyui 的tabs插件有兩種方式加載某個tab(標籤頁)上的內容:「href遠程請求」和「content本地內容」,本文就兩種方式的優缺點進行簡單分析和思考。
javascript
根據上面的分析,使用content的方式較爲簡潔,並且能夠引入iframe來搞定一切,缺點也很明顯,系統較爲複雜的話,將帶來極大地資源浪費,只適合較爲簡單的頁面系統;html
而href方式則對編碼能力要求的稍微高一些,由於html的片斷,稍微不注意就會處理很差,不過熟練的話,我的以爲href方式是不二之選。java
這個特性是由jQuery封裝的ajax請求處理機制所決定的,因此目標URL頁面裏不須要有html,head,body等標籤,即便有這些元素,也會被忽略,因此放在head標籤裏面的任何腳本也不會被引入或者執行。ajax
href連接的頁面比較複雜的時候,easyui對其渲染每每須要一個較長的過程,這時候,加載進來的html片斷毫無佈局可言,過一會自動會好,這時候easyui已經完成對它的渲染。如何避免這個混亂的過程呢,還得靠easyui的一個基礎插件——解析器(Parser)。佈局
Parser有個onComplete事件,這個事件就是指easyui對頁面完成渲染時觸發,這樣思路就很清晰了:用一個div遮罩住讓被加載進來的html片斷,在onComplete事件中,讓這個div淡出,這時候渲染好的html片斷就能美人出浴了,同時還整了個等待中的效果,一箭雙鵰。這樣要作兩件事:ui
第一是在要加載的html片斷中放一個遮罩用的div:this
<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事件就會被調用。url
其實這個現象是跟第一個現象的緣由同樣的,easyui完成對html片斷渲染須要必定的時間,頁面越複雜,耗時越長,這時候難以免html存在的腳本存在對easyui某些插件的調用,好比datagrid等,這個時候就會報錯,解決方案同上,將這些腳本放到onComplete事件裏處理,也就保證了渲染完成前,不會被執行。spa
這個現象應該是插件自身的bug,對位置的計算沒有考慮到這些特殊的事情,解決方式能夠投機取巧,在打開window後,讓表單不符合驗證的input得到焦點就能夠了。
官方已經說明在1.2.5的版本中已經修正了這個Bug,可是仍是有很多人反應會出現兩次加載遠程數據的現象,甚至在1.2.6版本中也會遇到,若是您確實遇到這種狀況了,則可能由如下狀況形成的:
5.1 本身的代碼不嚴謹形成的,這是比較低級的錯誤,若是遇到請按照如下兩個步驟檢查緣由:
爲何會這樣,看看源碼便知道了:
$.fn.tabs = function(options, param){ if (typeof options == 'string') { //這個地方的分支很清楚,只有當options爲字符串的時候,纔是直接調用控件自己提供的方法。 return $.fn.tabs.methods[options](this, param); } //若是options不是字符串,直接構造控件,進行渲染。 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屢次加載的問題大多數就是這麼發生的。
5.2,事件冒泡引發的二次加載也是有可能的,詳細狀況請參照:
http://www.easyui.info/archives/501.html
摘自:http://www.easyui.info/archives/164.html