JQueryEasyUI 提供的一种非常便捷的方法来完成对系统页面的整体布局。它将页面分为北(north)、东(east)、南(south)、西(west)、中(center)等五个部分，代表页面的上、右、下、左、中间（主工作区）等区域。
搭建布局框架：
在使用的时候只需要将 <body> 元素使用相应的样式，并在 <body> 中添加几个 <div> ，并把 <div> 指定一个 region 属性，值分别是 north\east\south\west\center 等即可。
区域大小：
不过，需要注意的是，主工作区（center 区域）左右两侧的区域（ east 和 west ）必需指定一个宽度，高度它们会自动适应,一般自己指定高度。
上下两侧的区域（ north 和 south ）则可以根据需要指定或自动高度，当然，宽度也是自适应的，一般不需要设置。
调整大小：
如果需要在运行的时候手动调整某个区域的大小，可以给 <div> 添加 split 属性，设置其值为 true 即可。如果不需要，可以设为 false 或不设。（注：center 区域不必设置该属性，如果需要调整 center 区域那个边的大小，可以在相应方向的侧边区域设置即可。）
区域标题：
如果要给某个区域添加标题，只需要为要添加标题的区域的 <div> 标签添加 title 属性即可。
===========================================================================================================================================
前提引入js：
<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-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
代码部分：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>EasyUI Demo</title> 6 7 <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"/> 8 <link rel="stylesheet" type="text/css" href="js/themes/icon.css"/> 9 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 10 <script type="text/javascript" src="js/jquery.easyui.min.js"></script> 11 12 <script type="text/javascript"> 13 14 </script> 15 </head> 16 17 <!--1. 在整个页面创建布局面板--> 18 <body class="easyui-layout"> 19 20 <!--1.1 egion="north"，指明高度，可以自适应--> 21 <div region="north" style="height:80px;"><center> <h1>管理系统</h1></center></div> 22 23 <!--1.2 region="west",必须指明宽度--> 24 <div region="west" title="导航菜单" split="true" style="220px" >页面左侧</div> 25 26 <!--1.3region="center",这里的宽度和高度都是由周边决定，不用设置--> 27 <div region="center"> 28 29 <!--2. 对<div>标签引用'easyui-layout'类,fit="true"自动适应父窗口,这里我们指定了宽度和高度--> 30 <div id="cc" class="easyui-layout" style="600px;height:400px;"> 31 <div region="north" title="North Title" split="true" style="height:100px;"></div> 32 <div region="south" title="South Title" split="true" style="height:100px;"></div> 33 <div region="east" iconCls="icon-reload" title="East" split="true" style="100px;"></div> 34 <div region="west" split="true" title="West" style="100px;"></div> 35 <div region="center" title="center title" style="padding:5px;background:#eee;"></div> 36 </div> 37 38 </div> 39 40 <!--1.4 region="east",必须指明宽度--> 41 <div region="east" style="100px;">页面右侧</div> 42 43 <!--1.5 region="south"，指明高度，可以自适应--> 44 <div region="south" style="height:50px;"><center> <h3>页面底部</h3></center></div> 45 </body> 46 </html>
效果图：
布局面板属性
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| title（标题） | string（字符串） | 布局面板的标题。 | null |
| region（区域） | string（字符串） | 定义布局面板的位置（方向），可以取下列值的其中之一：north, south, east, west, center。 | |
| border（边框） | boolean（布尔型） | 设置为true将显示布局面板的边框。 | true |
| split（分隔条） | boolean（布尔型） | 如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。 | false |
| iconCls（图标CSS类） | string（字符串） | 一个用来显示布局面板头部图标的css类。 | null |
| href（超链接） | string（字符串） | 一个用来从远程站点载入数据的超链接。 | null |
方法
| 名称 | 参数 | 描述 |
|---|---|---|
| resize | none | 设置布局面板的尺寸大小。 |
| panel | region | 返回特定的布局面板，'region'参数的可取值为：'north','south','east','west','center'。 |
| collapse | region | 折叠特定的布局面板，'region'参数的可取值为：'north','south','east','west'。 |
| expand | region | 延伸特定的布局面板，'region'参数的可取值为：'north','south','east','west'。 |