EasyUI之布局Layout

最新推荐文章于 2023-05-16 14:57:58 发布

sunpy 孙培煜

最新推荐文章于 2023-05-16 14:57:58 发布

阅读量2.2k

点赞数

分类专栏： __2.4 EasyUI 文章标签：布局 easyui

本文链接：https://blog.csdn.net/ya_1249463314/article/details/69665267

版权

__2.4 EasyUI 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.布局样式

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。如果设置高度，如果内容大于设置的高度则自动添加滚动条。

2.练习1：布局中间添加图片

layout01.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layout01</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
	<div id="layoutID" style="width: 700px; height: 500px;"
		class="easyui-layout" data-options="fit:true">
		<!-- 北边 -->
		<div data-options="region:'north',split:true" style="height: 100px;"></div>
		<div data-options="region:'south',title:'南边',split:true" style="height: 100px;"></div>
		<div data-options="region:'east',iconCls:'icon-reload',title:'东边',split:true" style="width: 100px;"></div>
		<div data-options="region:'west',title:'西边',split:true" style="width: 100px;"></div>
		<div data-options="region:'center',title:'中间',iconCls:'icon-save',href:'images/son.html'"
			style="padding: 5px; background: #eee;"></div>
	</div>
	
</body>
</html>

son.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>son</title>
</head>
<body>
	<img src="images/person.jpeg">
</body>
</html>

结果：

3.练习2：后台管理系统布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layout02</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>

<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout" id="layoutID" data-options="fit:true">
		<!-- 北边 -->
		<div data-options="region:'north',border:false" style="height:100px;"></div>
		<!-- 中间 -->
		<div data-options="region:'center'">
			<div class="easyui-layout" data-options="fit:true">
				<!-- 北边 -->
				<div data-options="region:'west',border:false" style="width:200px;border-top:0;"></div>
				<!-- 中间 -->
				<div data-options="region:'center'" style="border-top:0;"></div>
			</div>
		</div>
</body>
</html>

结果：