游戏技术文章

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

时间:2017-1-1 20:11:24  作者:棋牌资源网  来源:棋牌资源网  查看:7715  评论:0
内容摘要:首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化、还原窗口的时候,layout的某个区域不能填充因为浏览器扩大而产生的空白区域,这时候看起来就比较别扭了。当然了,如果你的lay...
首先解释一下标题的含义,当我们用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代码:

复制代码
 1 var settime = null;
 2 function redraw(){
 3 $('#wrap').layout('resize');
 4 $('#subWrap').layout('panel', 'north').panel('resize',{width:$('#subWrap').width()});
 5 $('#subWrap').layout('panel', 'center').panel('resize',{width:$('#subWrap').width()});
 6 $('#subWrap').layout('resize');
 7 }
 8 $(function(){
 9 $(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就可以了,这也算个折中而简单的解决方案吧。
演示页面看这里

标签:jQueryeasyuilayout布局自适应浏览器大小 

欢迎加入VIP,【VIP售价:只要288元永久VIP会员】畅享商业棋牌游戏程序下载,点击开通!

下载说明


☉本站所有源码和资源均由站长亲自测试-绝对保证都可以架设,运营!
☉如源码和资源有损坏或所有链接均不能下载,请告知管理员,

☉本站软件和源码大部分为站长独资,资源购买和收集,放心下载!

☉唯一站长QQ:1004003180  [人格担保-本站注重诚信!]

☉购买建议E-mail:1004003180@qq.com   源码收购 E-mail:1004003180@qq.com    

☉本站文件解压密码  【文章内都自带解压密码,每个密码不同!】


本站提供的所有源码,均来源站长提供,仅学习交流 浙ICP备09009969号

由此产生不良后果和法律责任与本站无关,如果侵犯了您的版权,请来信告知 1004003180@qq.com 将及时更正和删除! 

Copyright © 2008-2022 棋牌资源网,你身边的棋牌资源下载站    All Rights Reserved