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; $($( ...
随机推荐
- java中的二进制运算简单理解
package test9; public class StreamTest { public static void main(String[] args) { int a = 15;// 0b11 ...
- 网页图表Highcharts实践教程之图表区
网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...
- 我的php.ini上传文件配置
可以通过phpinfo查看.当前的配置信息 # php -i | grep php.ini //查看php.ini位置 file_uploads = on ...
- 在fork的项目里同步别人新增分支的方法
# 1.将项目B clone 到本地 git clone -b master 项目B的git地址 # 2.将项目A的git地址,添加至本地的remote git remote add upstream ...
- java并发基础(三)--- 任务执行
第6章开始是第二部分,讲解结构化并发应用程序,大多数并发应用程序都是围绕“任务执行”构造的,任务通常是一些抽象的且离散的工作单元. 一.线程池 大多数服务器应用程序都提供了一种自然的任务边界:以独立的 ...
- HDU 4734 F(x) (2013成都网络赛,数位DP)
F(x) Time Limit: 1000/500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- [Asp.net core 2.0]Ueditor 图片上传
摘要 在项目中要用到富文本编辑器,包含上传图片,插入视频等功能.但ueditor只有.net版本,没有支持core.那么上传等接口就需要自己实现了. 一个例子 首先去百度ueditor官网下载简化版的 ...
- HP Notebook PCs - Updating the BIOS
HP Notebook PCs - Updating the BIOS Updating the BIOS Updating the BIOS when Windows does not start ...
- 在Visual Studio中使用活动图描述业务流程
当希望描述某个流程的时候,用活动图表示. 在项目中添加一个名称为"Shopping"的文件夹. 把"Orders Model"这个UML类图拖放到Shoppin ...
- Delphi把一张PNG横向分割成N张透明通道的图片
Delphi新版本虽然集成了PngImage但是分割复制什么的却非常难用.稍微封装了一下.可以把一张PNG横向分割成N张.透明通道什么的都可以保持不变.typeTPngArray = array of ...