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="width: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="width: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="width:100px;"></div> 34 <div region="west" split="true" title="West" style="width: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="width: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'。 |