1、在整个页面上创建布局（Layout）
<!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title> <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css"> <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script> </head> <body class="easyui-layout"> <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',title:'East',split:true" style="100px;"></div> <div data-options="region:'west',title:'West',split:true" style="100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </body> </html>
2、在div中创建布局（Layout）
<!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title> <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css"> <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script> </head> <body> <div id="cc" class="easyui-layout" style="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',title:'East',split:true" style="100px;"></div> <div data-options="region:'west',title:'West',split:true" style="100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </div> </body> </html>
3、创建嵌套布局
<!DOCTYPE html> <html> <head> <title>吹泡泡的魚-主页</title> <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/gray/easyui.css"> <script type="text/javascript" src="js/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script> </head> <body class="easyui-layout"> <div data-options="region:'north'" style="height:100px"></div> <div data-options="region:'center'"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'west',title:'West',collapsed:true" style="180px"></div> <div data-options="region:'center'"></div> </div> </div> </body> </html>
data-options详解：
布局选项（Layout Options）
| 名称 | 类型 | 描述 | 默认值 |
| fit | boolean |
当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。 当在 'body' 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。 |
false |
区域面板选项（Region Panel Options）
| 名称 | 类型 | 描述 | 默认值 |
| title | string | 布局面板（layout panel）的标题文本。 | null |
| region | string | 定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。 | |
| border | boolean | 当设置为 true 时，就显示布局面板（layout panel）的边框。 | true |
| split | boolean | 当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。 | false |
| iconCls | string | 在面板（panel）头部显示一个图标的 CSS class。 | null |
| href | string | 从远程站点加载数据的 URL 。 | null |
| collapsible | boolean | 定义是否显示可折叠按钮。 | true |
| minWidth | number | 面板（panel）最小宽度。 | 10 |
| minHeight | number | 面板（panel）最小高度。 | 10 |
| maxWidth | number | 面板（panel）最大宽度。 | 10000 |
| maxHeight | number | 面板（panel）最大高度。 | 10000 |