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”基本就可以解决问题,点击此处查看演示,相对于不能自适应的情况,变动的代码只有下面一行:
这种解决方案应该是最简单的了,不过在非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的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就可以了,这也算个折中而简单的解决方案吧。
演示页面看这里
jQuery easyui layout布局自适应浏览器大小(转)的更多相关文章
- JQuery EasyUI Layout 在from布局自适应窗口大小
在JQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄. 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置 ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- css自适应浏览器大小
css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...
- EasyUI Layout 布局
1.在整个页面上创建布局(Layout) <!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- easyui layout布局的属性说明
layout布局的属性说明: 名称 类型 描述 默认值 fit boolean 当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器.当在 'body' 标签上创建布局(layout ...
- Bootstrap3基础 栅格系统 页面布局随 浏览器大小的变化而变化
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- HTML中使背景图片自适应浏览器大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- easyui layout 布局title
<script> function aclick(){ $("a").click(function () { var name=this.innerHTML; $($( ...
随机推荐
- Node.js数据库连接池操作通用工具(MySQL模块)
出处:OSN开源站点数据库通用工具类,OSN源代码地址,https://github.com/obullxl/osnode-site,百度云演示站点,http://obullxl.duapp.com使 ...
- 使用Puppeteer进行数据抓取(二)——Page对象
page对象是puppeteer最常用的对象,它可以认为是chrome的一个tab页,主要的页面操作都是通过它进行的.Google的官方文档详细介绍了page对象的使用,这里我只是简单的小结一下. 客 ...
- SPI SWD Protocol Implement
//================================================================================= // ARM SWD Mode ...
- Java深入 - 深入 Java自己定义注解
我们在使用Spring框架的时候,会常常使用类似:@Autowired 这种注解. 我们也能够自定义一些注解.Java的注解主要在包:java.lang.annotation中实现. 1. 元注解 什 ...
- 解决sublime text 3中文乱码问题
解决中文乱码,需要安装两个插件 一.安装Codecs Ctrl+Shift+P 输入Install Package-->Codecs 二.安装gbk support 菜单:preferences ...
- 安装express并创建工程
安装express npm install express-generator -g 使用命令创建express工程, express projectName 生成express相应的工程结构 bin ...
- SQL:获取中文周几
) = case DatePart(DW, GetDate()) then '周日' then '周一' then '周二' then '周三' then '周四' then '周五' then '周 ...
- SharePoint 列表视图修改多行文本字段显示长度
前言 最近有这么个需求,用户希望在所有项目视图显示多行文本字段,然后,又不希望显示的过场,也就是处理一下长度. 一开始就想到用js的方式去处理,偶然间发现还可以用jslink,尝试了一下,非常好用,分 ...
- 删除list中的特定元素
对于动态删除list中的特定元素,一般用linkedList,删除时有以下两种方法. 1. 循环遍历,找到要删除的元素后删除并且减少list长度.如果不减少list长度,那么就仅仅删除了元素,但没改变 ...
- 用layer-list实现弧形进度条
本文转载自:http://www.linuxidc.com/Linux/2013-04/82743.htm 之前我有写过如何用style或者是layer-list实现自定义的横向进度条(http:// ...