一、引言 EasyUI 提供的一种非常便捷的组件easyui-layout，来完成对系统页面的整体布局。它将页面分为北(north)、东(east)、南(south)、西(west)、中(center
一、引言
EasyUI 提供的一种非常便捷的组件easyui-layout，来完成对系统页面的整体布局。它将页面分为北(north)、东(east)、南(south)、西(west)、中(center)等五个部分，代表页面的上、右、下、左、中间（主工作区）等区域。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。
在开发MIS系统中，north区域用于放置系统名称、登陆用户信息、系统级操作（如退出系统、注销、锁屏等）；south放置版权声明；west通常作为导航菜单；center用于存放tab窗口展示数据。East比较少用，也可用于参数设置等。
二、创建布局
创建布局需指定元素class="dasyui-layout"。布局有两种方式创建，一种是通过标记创建，即<div id="cc" class="easyui-layout"> </div>。另一种是在整个页面创建布局，即<body class="easyui-layout"></body>。
这里我们采用第二种方式，代码如下：
<html><head> <meta charset="UTF-8"> <title>easyui学习笔记</title> <link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/icon.css"/> <script type="text/javascript" src="jslib/easyui1.3.5/jquery.min.js"></script> <script type="text/javascript" src="jslib/easyui1.3.5/jquery.easyui.min.js"></script> <script type="text/javascript" src="jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script></head><body class="easyui-layout"> <div id="head" data-options="region:'north'" style="height:60px;"> <div style="height:30px;font-size:30px">MISP</div> </div> <div id="foot" data-options="region:'south'" style="height:30px;text-align: center;background: #D2E0F2">CopyRight:SCAU</div> <div id="nav" data-options="region:'west',split:true" style="width:200px" title="导航"> </div> <div id="mainPanle" data-options="region:'center'"> <div id="tabs" class="easyui-tabs" data-options="fit:true, border: false" > <div title="About" data-options="iconCls:'icon-tip'"> <iframe src="about.html" style="border: 0; width: 100%; height: 98%;" frameBorder="0"></iframe> </div> </div> </div></body></html>运行tomcat，在浏览器中输入localhost:8080/easyui/index.html。
一句话：so easy so beautiful
三、Layout属性
接下来对代码进行简单解释。
在body中添加若干div， <div>中通常有以下几种参数。
(1) id 用于标记该div，js代码中通过该id关联该div。
(2) data-options对easyui组件的属性设值。
(3) style设置高度、颜色等样式信息。
下面介绍Layout几个常用的属性：
(1) region 属性设置区域，值分别是 north/east/south/west/center。左右两侧的区域（ east 和 west ）必需指定一个宽度，高度自动适应。上下两侧的区域（ north 和 south ）则可以根据需要指定或自动高度，当然，宽度是自适应。
(2) split 属性，值为 true/false，在运行时是否可手动调整区域大小。
(3) fit 属性，值为 true/false，当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。
(4) collapsible属性，值为 true/false，是否显示折叠按钮。
(5) title属性定义每个区域的标题。
(6) iconCls属性，值为icon.css中css class，指定小图标。
还有一些其他的属性，可以从http://www.jeasyui.net/首页下方“所有的Easyui插件”点击相应插件查看其属性和方法。
开始学习时不需要尝试记住它们，就像java的API一样，不知道就查下，多用就会了。
