二、easyUI中的layout（布局）组件
1.layout（布局）组件的概述
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
2.layout（布局）组件的使用
新建一个02-layout.html页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>layout（布局）组件</title><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><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="cc" class="easyui-layout" style="width:600px;height:400px;"><div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div><div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div><div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div><div data-options="region:'west',title:'West',split:true" style="width:100px;"></div><div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></div>
</body>
</html>
如下图所示的效果:
创建出来的布局组件铺满整个页面
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| fit | boolean | 如果设置为true，布局组件将自适应父容器。当使用body标签穿件布局的时候，整个页面会自动最大。 | false |
可以将02-layout.html页面修改成下面这个样子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>layout（布局）组件</title><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><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="cc" class="easyui-layout" data-options="fit:true"><div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div><div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div><div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div><div data-options="region:'west',title:'West',split:true" style="width:100px;"></div><div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></div>
</body>
</html>
如下图所示的效果:
面板属性，最常用的一些，比如region、title以及split这些属性
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 布局面板标题文本 | null |
| region | string | 定义布局面板位置，可用的值有: north,south,east,west,center | |
| border | boolean | 为true时显示布局面板边框 | true |
| split | boolean | 为true时用户可以通过分割栏改变面板人小 | false |
| iconCls | string | 一个包含图标的CSS类ID，该图标将会显示到面板标题上 | null |
| href | string | 用于读取远程站点数据的URL链接 | null |
| collapsible | boolean | 定义是否显示折叠按钮。(该属性自1.3.3版开始可用) | true |
| minWidth | number | 最小面板宽度(该属性自1.3.3版开始可用) | 10 |
| minHeight | number | 最小面板高度(该属性自1.3.3版开始可用) | 10 |
| maxWidth | number | 最大面板宽度该属性自1.3.3版开始可用) | 10000 |
| maxHeight | number | 最大面板高度该属性自1.3.3版开始可用) s | 10000 |
为了使用这些常用的面板属性，可以将02-layout.html页面修改成下面这个样子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>layout（布局）组件</title><link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><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="cc" class="easyui-layout" data-options="fit:true"><div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;"></div><div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;"></div><div data-options="region:'center',title:'数据区域'" style="padding:5px;background:#eee;"></div></div>
</body>
</html>
输出结果如下所示：
