首先解释一下标题的含义,当我们用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”基本就可以解决问题,相对于不能自适应的情况,变动的代码只有一行。
这种解决方案应该是最简单的了,不过在非IE浏览器下面,大家可能会发现,反复调整浏览器大小,特别是缩小浏览器的时候,子级的layout就会出现滚动条,一时半会儿也没查出是什么原因导致的。所以网上还有一种较为复杂的解决方案,那就是利用jQuery的resize事件对浏览器窗口监听,当浏览器被调整时重新设置某些页面元素大小,要自适应大小的话,只要设置成跟父元素同宽就可以了,下面是JS代码:
var settime = null; function redraw() { $(‘#wrap’).layout(‘resize’); $(‘#subWrap’).layout(‘panel’, ‘north’).panel(‘resize’, { width: $(‘#subWrap’).width() }); $(‘#subWrap’).layout(‘panel’, ‘center’).panel(‘resize’, { width: $(‘#subWrap’).width() }); $(‘#subWrap’).layout(‘resize’); } $(function() { $(window).resize(function() { if (settime != null) clearTimeout(settime); settime = setTimeout(“redraw()”, 100); }); var p1 = $(‘body’).layout(‘panel’, ’west’).panel({ onCollapse: function() { if (settime != null) clearTimeout(settime); settime = setTimeout(“redraw()”, 100); }, onExpand: function() { if (settime != null) clearTimeout(settime); settime = setTimeout(“redraw()”, 100); }, onResize: function(width, height) { if (settime != null) clearTimeout(settime); settime = setTimeout(“redraw()”, 100); } }); var p2 = $(‘body’).layout(‘panel’, ’east’).panel({ onCollapse: function() { if (settime != null) clearTimeout(settime); settime = setTimeout(“redraw()”, 100); }, onExpand: function() { if (settime != null) clearTimeout(settime); settime = setTimeout(“redraw()”, 100); }, onResize: function(width, height) { if (settime != null) clearTimeout(settime); settime = setTimeout(“redraw()”, 100); } }); });
相关推荐
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
最近在把以前写的一个项目改成用easyui做前端。过程中遇到了不少问题。其中一个就是datagrid不能很好的布局。...这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好
jquery easyui 经典布局 类似extjs 感谢原作者
jquery EasyUI的API,方便使用easyui查看。。。。。。
本篇文章小编为大家介绍JQueryEasyUI Layout布局框架的使用,有需要的朋友可以参考一下
jqueryEasyUI 下载,及api下载 jqueryEasyUI 下载,及api下载
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
jquery easyui 帮助文档 非常好用的
jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档jQuery EasyUI 中文文档...
jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...
jQuery EasyUI EasyUI 组件范例
jQuery EasyUI 1.4.3 API 中文 jQuery EasyUI 1.4.3 API jQuery EasyUI 1.4.3 API
jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档 jQuery EasyUI 1.5.1文档
jQuery EasyUI 1.4.2 版 API 中文版手册
jQuery EasyUI 1.5API 中文版文档 最新版jQuery easy ui
jQuery EasyUI 1.0.5在menu组件上增加了一个href属性,改属性允许用户在同一个浏览器窗口内展示不同的页面 3. jQuery EasyUI 1.0.5增加了validatebox组件的的校验器。 4. jQuery EasyUI 1.0.5改进了dialog组件,...