镇海区住房和建设网站,科技通信网站模板下载,商品详情页面模板html,wordpress部分内容加密首先解释一下标题的含义#xff0c;当我们用jQuery easyui layout 进行布局的时候#xff0c;可能会遇到这样一个问题#xff0c;那就是当手工调整浏览器大小#xff0c;或者最大化、还原窗口的时候#xff0c;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属性只要设置为truelayout就能自适应父元素的大小而变化所以只要加上fit”true”基本就可以解决问题点击此处查看演示相对于不能自适应的情况变动的代码只有下面一行 1 这种解决方案应该是最简单的了不过在非IE浏览器下面大家可能会发现反复调整浏览器大小特别是缩小浏览器的时候子级的layout就会出 现滚动条一时半会儿也没查出是什么原因导致的。所以网上还有一种较为复杂的解决方案那就是利用jQuery的resize事件对浏览器窗口监听当浏 览器被调整时重新设置某些页面元素大小要自适应大小的话只要设置成跟父元素同宽就可以了下面是JS代码 01var settime null;02function 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(){10if(settime ! null)11clearTimeout(settime);12settimesetTimeout(redraw(),100);13});14var p1 $(body).layout(panel,west).panel({15onCollapse:function(){16if(settime ! null)17clearTimeout(settime);18settimesetTimeout(redraw(),100);19},20onExpand:function(){21if(settime ! null)22clearTimeout(settime);23settimesetTimeout(redraw(),100);24},25onResize:function(width,height){26if(settime ! null)27clearTimeout(settime);28settimesetTimeout(redraw(),100);29}30});31var p2 $(body).layout(panel,east).panel({32onCollapse:function(){33if(settime ! null)34clearTimeout(settime);35settimesetTimeout(redraw(),100);36},37onExpand:function(){38if(settime ! null)39clearTimeout(settime);40settimesetTimeout(redraw(),100);41},42onResize:function(width,height){43if(settime ! null)44clearTimeout(settime);45settimesetTimeout(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就可以了这也算个折中而简单的解决方案吧。演示页面看这里转载于:https://www.cnblogs.com/shihao/archive/2012/05/07/2489368.html
