jQuery easyUI 用layout 自适应浏览器大小

最新推荐文章于 2019-08-07 23:05:33 发布

HCY777

最新推荐文章于 2019-08-07 23:05:33 发布

阅读量1k

点赞数

分类专栏： jQuery easyUI

jQuery easyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先解释一下标题的含义，当我们用jQuery easyui layout 进行布局的时候，可能会遇到这样一个问题，那就是当手工调整浏览器大小，或者最大化、还原窗口的时候，layout的某个区域不能填充因为浏览器扩大而产生的空白区域，这时候看起来就比较别扭了。当然了，如果你的layout是直接放在body标签上的，且没有嵌套的layout的话，是不会出现layout不能自适应大小的情况的。

当布局比较复杂，势必就会要layout嵌套起来使用，这时候出现的页面不能自适应大小的情况就让我不能忍受，这个问题困扰了我几天时间，好在有万能的网络，问题总会得到解决，下面就将自己这两天查资料以及自己实践的经验介绍给大家，希望对以后遇到同样问题的朋友有所帮助。但是此处并不做深入分析，因为我也不熟悉jQuery和easyui。

先写一个有嵌套的layout，父级基于body，包含north,center,west,east,south五个区域，子级layout基于父级的center区域，如果你打开页面的时候，浏览器不是最大化，然后手工调整浏览器大小，就会发现问题所在。

使用子级layout使用fit=’true’的属性后，基本可以使页面保持自适应，就是在非IE浏览器下面，拉伸浏览器后，再还原包含子级layout的region便会含有滚动条。只要让包含自己layout的region上使用overflow:hidden就可以了，这也算个折中而简单的解决方案吧。这里是演示页面

源代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI Layout Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<script type="text/javascript" src="../jquery-1.6.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<style type="text/css">
		body {
			margin:0px;
			padding:0px;
			width:100%;
			height:100%;
		}
	</style>
</head>
<body class="easyui-layout">
	<div region="north" border="false" style="height:30px;background:#B3DFDA;">north region</div>
	<div region="west" split="true" title="tree" style="width:150px;padding:10px;">west content</div>
	<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
	<div region="south" border="false" style="height:20px;background:#A9FACD;">south region</div>
	<div region="center" border="true" title="center" style="border-left:0px;border-right:0px;overflow:hidden;">		
		<div class="easyui-layout" id="subWrap" fit="true" style="width:100%;height:100%;background:#0A3DA4;">
			<div region="north" border="true" title="condtion" split="true" style="height:200px;background:#A9FACD;">
				<p style="font-size:48;margin:0px auto;text-align:center;">sub north region</p>
			</div>
			<div region="center" border="true" title="result" split="true" style="background:#E2E377;">
				<p style="font-size:48;margin:0px auto;text-align:center;">sub center region</p>
			</div>			
		</div>		
	</div>
</body>
</html>

转自这个

HCY777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery easyUI 用layout 自适应浏览器大小

当我们用jQuery easyui layout 进行布局的时候，可能会遇到这样一个问题，那就是当手工调整浏览器大小，或者最大化、还原窗口的时候，layout的某个区域不能填充因为浏览器扩大而产生的空白区域，这时候看起来就比较别扭了。当然了，如果你的layout是直接放在body标签上的，且没有嵌套的layout的话，是不会出现layout不能自适应大小的情况的。
复制链接

扫一扫

专栏目录