jQuery easyui layout布局自適應瀏覽器大小

首先解釋一下標題的含義，當我們用jQuery easyui layout 進行布局的時候，可能會遇到這樣一個問題，那就是當手工調整瀏覽器大小，或者最大化、還原窗口的時候，layout的某個區域不能填充因為瀏覽器擴大而產 生的空白區域，這時候看起來就比較別扭了。當然了，如果你的layout是直接放在body標簽上的，且沒有嵌套的layout的話，是不會出現 layout不能自適應大小的情況的。

當布局比較復雜，勢必就會要layout嵌套起來使用，這時候出現的頁面不能自適應大小的情況就讓我不能忍受，這個問題困擾了我幾天時間，好在有萬 能的網絡，問題總會得到解決，下面就將自己這兩天查資料以及自己實踐的經驗介紹給大家，希望對以后遇到同樣問題的朋友有所幫助。但是此處並不做深入分析， 因為我也不熟悉jQuery和easyui。

先寫一個有嵌套的layout，父級基於body，包含north,center,west,east,south五個區域，子級layout基於父級的center區域，如果你打開頁面的時候，瀏覽器不是最大化，然后手工調整瀏覽器大小，就會發現問題所在，點擊此處查看演示。

其實，layout繼承自panel，而panel有個fit屬性，只要設置為true，layout就能自適應父元素的大小而變化，所以只要加上fit=”true”基本就可以解決問題，點擊此處查看演示，相對於不能自適應的情況，變動的代碼只有下面一行：

1

這種解決方案應該是最簡單的了，不過在非IE瀏覽器下面，大家可能會發現，反復調整瀏覽器大小，特別是縮小瀏覽器的時候，子級的layout就會出 現滾動條，一時半會兒也沒查出是什么原因導致的。所以網上還有一種較為復雜的解決方案，那就是利用jQuery的resize事件對瀏覽器窗口監聽，當瀏 覽器被調整時重新設置某些頁面元素大小，要自適應大小的話，只要設置成跟父元素同寬就可以了，下面是JS代碼：

01	var settime = null;

02	function redraw(){

03	$('#wrap').layout('resize');

04	$('#subWrap').layout('panel', 'north').panel('resize',{width:$('#subWrap').width()});

05	$('#subWrap').layout('panel', 'center').panel('resize',{width:$('#subWrap').width()});

06	$('#subWrap').layout('resize');

07

}

08	$(function(){

09	$(window).resize(function(){

10	if(settime != null)

11	clearTimeout(settime);

12	settime=setTimeout("redraw()",100);

13

});

14	var p1 = $('body').layout('panel','west').panel({

15	onCollapse:function(){

16	if(settime != null)

17	clearTimeout(settime);

18	settime=setTimeout("redraw()",100);

19

},

20	onExpand:function(){

21	if(settime != null)

22	clearTimeout(settime);

23	settime=setTimeout("redraw()",100);

24

},

25	onResize:function(width,height){

26	if(settime != null)

27	clearTimeout(settime);

28	settime=setTimeout("redraw()",100);

29

}

30

});

31	var p2 = $('body').layout('panel','east').panel({

32	onCollapse:function(){

33	if(settime != null)

34	clearTimeout(settime);

35	settime=setTimeout("redraw()",100);

36

},

37	onExpand:function(){

38	if(settime != null)

39	clearTimeout(settime);

40	settime=setTimeout("redraw()",100);

41

},

42	onResize:function(width,height){

43	if(settime != null)

44	clearTimeout(settime);

45	settime=setTimeout("redraw()",100);

46

}

47

});

48

});

當然了，用jQuery的resize監聽對於這樣的頁面還是不夠，因為當我，展開活收縮父級layout的west和east區域，或是是拉動 west和est與center之間的split調整大小的時候，子級的layout依舊會出現不能自動填充的情況，所以對於這些事件，統統需要捕捉處理 子級layout的布局問題，這也是我上面的js代碼為何出了監聽window的resize事件外還監聽了其它幾個事件的原因，相當麻煩？如果有更好的 解決方案，歡迎大家提出來。最后調整好的頁面演示在這里

2011年11月13號更新：

使用子級layout使用fit=’true’的屬性后，基本可以使頁面保持自適應，就是在非IE瀏覽器下面，拉伸瀏覽器后，再還原包含子級 layout的region便會含有滾動條。為了解決這個滾動條問題使用了jquery的resize事件，其實在不必這么大費周折，只要讓包含自己 layout的region上使用overflow:hidden就可以了，這也算個折中而簡單的解決方案吧。
演示頁面看這里