jQuery easyui layout布局自适应浏览器大小

╰+哭是因爲堅強的太久メ 2022-09-18 12:54 475阅读 0赞

首先解释一下标题的含义，当我们用jQuery easyui layout 进行布局的时候，可能会遇到这样一个问题，那就是当手工调整浏览器大小，或者最大化、还原窗口的时候，layout的某个区域不能填充因为浏览器扩大而产生的空白区域，这时候看起来就比较别扭了。当然了，如果你的layout是直接放在body标签上的，且没有嵌套的layout的话，是不会出现layout不能自适应大小的情况的。

当布局比较复杂，势必就会要layout嵌套起来使用，这时候出现的页面不能自适应大小的情况就让我不能忍受，这个问题困扰了我几天时间，好在有万能的网络，问题总会得到解决，下面就将自己这两天查资料以及自己实践的经验介绍给大家，希望对以后遇到同样问题的朋友有所帮助。但是此处并不做深入分析，因为我也不熟悉jQuery和easyui。

先写一个有嵌套的layout，父级基于body，包含north,center,west,east,south五个区域，子级layout基于父级的center区域，如果你打开页面的时候，浏览器不是最大化，然后手工调整浏览器大小，就会发现问题所在，[点击此处查看演示][Link 1]。

其实，layout继承自panel，而panel有个fit属性，只要设置为true，layout就能自适应父元素的大小而变化，所以只要加上fit=”true”基本就可以解决问题，[点击此处查看演示][Link 2]，相对于不能自适应的情况，变动的代码只有下面一行：

这种解决方案应该是最简单的了，不过在非IE浏览器下面，大家可能会发现，反复调整浏览器大小，特别是缩小浏览器的时候，子级的layout就会出现滚动条，一时半会儿也没查出是什么原因导致的。所以网上还有一种较为复杂的解决方案，那就是利用jQuery的resize事件对浏览器窗口监听，当浏览器被调整时重新设置某些页面元素大小，要自适应大小的话，只要设置成跟父元素同宽就可以了，下面是JS代码：

<table> 
 <tbody> 
  <tr> 
   <td><code>01</code></td> 
   <td><code>var</code> <code>settime = </code><code>null</code><code>;</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>02</code></td> 
   <td><code>function</code> <code>redraw(){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>03</code></td> 
   <td><code>$(</code><code>'#wrap'</code><code>).layout(</code><code>'resize'</code><code>);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>04</code></td> 
   <td><code>$(</code><code>'#subWrap'</code><code>).layout(</code><code>'panel'</code><code>, </code><code>'north'</code><code>).panel(</code><code>'resize'</code><code>,{width:$(</code><code>'#subWrap'</code><code>).width()});</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>05</code></td> 
   <td><code>$(</code><code>'#subWrap'</code><code>).layout(</code><code>'panel'</code><code>, </code><code>'center'</code><code>).panel(</code><code>'resize'</code><code>,{width:$(</code><code>'#subWrap'</code><code>).width()});</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>06</code></td> 
   <td><code>$(</code><code>'#subWrap'</code><code>).layout(</code><code>'resize'</code><code>);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>08</code></td> 
   <td><code>$(</code><code>function</code><code>(){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>09</code></td> 
   <td><code>$(window).resize(</code><code>function</code><code>(){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>10</code></td> 
   <td><code>if</code><code>(settime != </code><code>null</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>11</code></td> 
   <td><code>clearTimeout(settime);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>12</code></td> 
   <td><code>settime=setTimeout(</code><code>"redraw()"</code><code>,100);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>14</code></td> 
   <td><code>var</code> <code>p1 = $(</code><code>'body'</code><code>).layout(</code><code>'panel'</code><code>,</code><code>'west'</code><code>).panel({ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>15</code></td> 
   <td><code>onCollapse:</code><code>function</code><code>(){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>16</code></td> 
   <td><code>if</code><code>(settime != </code><code>null</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>17</code></td> 
   <td><code>clearTimeout(settime);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>18</code></td> 
   <td><code>settime=setTimeout(</code><code>"redraw()"</code><code>,100);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>20</code></td> 
   <td><code>onExpand:</code><code>function</code><code>(){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>21</code></td> 
   <td><code>if</code><code>(settime != </code><code>null</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>22</code></td> 
   <td><code>clearTimeout(settime);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>23</code></td> 
   <td><code>settime=setTimeout(</code><code>"redraw()"</code><code>,100);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>25</code></td> 
   <td><code>onResize:</code><code>function</code><code>(width,height){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>26</code></td> 
   <td><code>if</code><code>(settime != </code><code>null</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>27</code></td> 
   <td><code>clearTimeout(settime);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>28</code></td> 
   <td><code>settime=setTimeout(</code><code>"redraw()"</code><code>,100);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>31</code></td> 
   <td><code>var</code> <code>p2 = $(</code><code>'body'</code><code>).layout(</code><code>'panel'</code><code>,</code><code>'east'</code><code>).panel({ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>32</code></td> 
   <td><code>onCollapse:</code><code>function</code><code>(){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>33</code></td> 
   <td><code>if</code><code>(settime != </code><code>null</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>34</code></td> 
   <td><code>clearTimeout(settime);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>35</code></td> 
   <td><code>settime=setTimeout(</code><code>"redraw()"</code><code>,100);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>37</code></td> 
   <td><code>onExpand:</code><code>function</code><code>(){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>38</code></td> 
   <td><code>if</code><code>(settime != </code><code>null</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>39</code></td> 
   <td><code>clearTimeout(settime);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>40</code></td> 
   <td><code>settime=setTimeout(</code><code>"redraw()"</code><code>,100);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>42</code></td> 
   <td><code>onResize:</code><code>function</code><code>(width,height){ </code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>43</code></td> 
   <td><code>if</code><code>(settime != </code><code>null</code><code>)</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>44</code></td> 
   <td><code>clearTimeout(settime);</code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><code>45</code></td> 
   <td><code>settime=setTimeout(</code><code>"redraw()"</code><code>,100);</code></td> 
  </tr> 
 </tbody> 
</table>

当然了，用jQuery的resize监听对于这样的页面还是不够，因为当我，展开活收缩父级layout的west和east区域，或是是拉动west和est与center之间的split调整大小的时候，子级的layout依旧会出现不能自动填充的情况，所以对于这些事件，统统需要捕捉处理子级layout的布局问题，这也是我上面的js代码为何出了监听window的resize事件外还监听了其它几个事件的原因，相当麻烦？如果有更好的解决方案，欢迎大家提出来。最后调整好的页面[演示在这里][Link 3]

**2011年11月13号更新：**

使用子级layout使用fit=’true’的属性后，基本可以使页面保持自适应，就是在非IE浏览器下面，拉伸浏览器后，再还原包含子级layout的region便会含有滚动条。为了解决这个滚动条问题使用了jquery的resize事件，其实在不必这么大费周折，只要让包含自己layout的region上使用overflow:hidden就可以了，这也算个折中而简单的解决方案吧。  
[演示页面看这里][Link 4]

[Link 1]: http://www.loststop.com/easyui/demo/layout-resize-1.html
[Link 2]: http://www.loststop.com/easyui/demo/layout-resize-2.html
[Link 3]: http://www.loststop.com/easyui/demo/layout-resize-3.html
[Link 4]: http://www.loststop.com/easyui/demo/layout-resize-4.html