一、EasyUI佈局介紹
easyUI佈局容器包括東、西、南、北、中五個區域，其中中心面板是必須的，而東、西、南、北這四個面板是可選的，如果佈局裏面不需要東、西、南、北這四個面板，那麼可以把相應的div刪掉，另外，如果需要創建複雜的easyUI佈局，那麼可以通過嵌套東、西、南、北、中五個面板來實現。下面簡單演示一下EasyUI佈局。
1.1、通過div創建easyUI佈局
easyUI的layout可以通過div來創建，使用div來創建easyUI的layout，那麼div的html代碼結構必須要如下的結構：
1 <!--給div指定class屬性指定easy的easyui-layout樣式，這樣就可以通過div創建easyui的layout -->
2 <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
3 <!-- 佈局中如果不需要north這個面板，那麼可以刪掉這個div -->
4 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
5 <!-- 佈局中如果不需要south這個面板，那麼可以刪掉這個div -->
6 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
7 <!-- 佈局中如果不需要east這個面板，那麼可以刪掉這個div -->
8 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
9 <!-- 佈局中如果不需要west這個面板，那麼可以刪掉這個div -->
10 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
11 <!--north，south， east，west這幾個面板都可以刪掉，唯有這個center面板一定不能刪掉，否則使用easyui-layout就會出錯 -->
12 <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>
13 </div>
看看完整的範例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>通過div創建EasyUI的layout佈局</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <!-- 引入JQuery -->
7 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
8 <!-- 引入EasyUI -->
9 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
10 <!-- 引入EasyUI的中文國際化js，讓EasyUI支持中文 -->
11 <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
12 <!-- 引入EasyUI的樣式文件-->
13 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
14 <!-- 引入EasyUI的圖標樣式文件-->
15 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
16 </head>
17
18 <body>
19 <!--給div指定class屬性指定easy的easyui-layout樣式，這樣就可以通過div創建easyui的layout -->
20 <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
21 <!-- 佈局中如果不需要north這個面板，那麼可以刪掉這個div -->
22 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
23 <!-- 佈局中如果不需要south這個面板，那麼可以刪掉這個div -->
24 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
25 <!-- 佈局中如果不需要east這個面板，那麼可以刪掉這個div -->
26 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
27 <!-- 佈局中如果不需要west這個面板，那麼可以刪掉這個div -->
28 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
29 <!--north，south， east，west這幾個面板都可以刪掉，唯有這個center面板一定不能刪掉，否則使用easyui-layout就會出錯 -->
30 <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>
31 </div>
32 </body>
33 </html>
運行結果如下圖所示：
1.2、通過body創建easyUI佈局
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>EasyUI佈局</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <!-- 引入JQuery -->
7 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
8 <!-- 引入EasyUI -->
9 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
10 <!-- 引入EasyUI的中文國際化js，讓EasyUI支持中文 -->
11 <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
12 <!-- 引入EasyUI的樣式文件-->
13 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
14 <!-- 引入EasyUI的圖標樣式文件-->
15 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
16 </head>
17 <!--給body指定class屬性指定easy的easyui-layout樣式，這樣就可以 使用body創建easyui的layout -->
18 <body class="easyui-layout">
19 <!-- 佈局中如果不需要north這個面板，那麼可以刪掉這個div -->
20 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
21 <!-- 佈局中如果不需要south這個面板，那麼可以刪掉這個div -->
22 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
23 <!-- 佈局中如果不需要east這個面板，那麼可以刪掉這個div -->
24 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
25 <!-- 佈局中如果不需要west這個面板，那麼可以刪掉這個div -->
26 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
27 <!--north，south， east，west這幾個面板都可以刪掉，唯有這個center面板一定不能刪掉，否則使用easyui-layout就會出錯 -->
28 <div data-options="region:'center',title:'center title',href:'center.html'" style="padding:5px;"></div>
29 </body>
30
31 </html>
運行結果如下所示：
1.3、使用嵌套easyui-layout來創建複雜佈局
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>EasyUI佈局</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <!-- 引入JQuery -->
7 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
8 <!-- 引入EasyUI -->
9 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
10 <!-- 引入EasyUI的中文國際化js，讓EasyUI支持中文 -->
11 <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
12 <!-- 引入EasyUI的樣式文件-->
13 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
14 <!-- 引入EasyUI的圖標樣式文件-->
15 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
16 </head>
17 <!--給body指定class屬性指定easy的easyui-layout樣式，這樣就可以 使用body創建easyui的layout -->
18 <body class="easyui-layout">
19 <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
20 <!-- 佈局中如果不需要west這個面板，那麼可以刪掉這個div -->
21 <div data-options="region:'west',title:'West'" style="width:100px;"></div>
22 <div data-options="region:'center'">
23 <!-- 嵌套佈局 -->
24 <div class="easyui-layout" data-options="fit:true">
25 <!-- 佈局中如果不需要north這個面板，那麼可以刪掉這個div -->
26 <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
27 <!-- 佈局中如果不需要south這個面板，那麼可以刪掉這個div -->
28 <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
29 <!-- 佈局中如果不需要east這個面板，那麼可以刪掉這個div -->
30 <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
31 <!-- 佈局中如果不需要west這個面板，那麼可以刪掉這個div -->
32 <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
33 <!--north，south， east，west這幾個面板都可以刪掉，唯有這個center面板一定不能刪掉，否則使用easyui-layout就會出錯 -->
34 <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>
35 </div>
36 </div>
37 </body>
38 </html>
運行結果如下所示：
1.4、通過Javascript創建easyUI佈局
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>通過JavaScript來創建EasyUI佈局</title>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <!-- 引入JQuery -->
7 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
8 <!-- 引入EasyUI -->
9 <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
10 <!-- 引入EasyUI的中文國際化js，讓EasyUI支持中文 -->
11 <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
12 <!-- 引入EasyUI的樣式文件-->
13 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
14 <!-- 引入EasyUI的圖標樣式文件-->
15 <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
16 <script type="text/javascript">
17 $(function(){
18 //畫面加載完成之後就調用layout()方法將body變成easy的layout
19 $('#easyUILayoutBody').layout();
20 });
21 </script>
22 </head>
23 <!--給body指定class屬性指定easy的easyui-layout樣式，這樣就可以 使用body創建easyui的layout -->
24 <body id="easyUILayoutBody">
25 <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
26 <!-- 佈局中如果不需要west這個面板，那麼可以刪掉這個div -->
27 <div data-options="region:'west',title:'West'" style="width:100px;"></div>
28 <div data-options="region:'center',title:'center'"></div>
29 </body>
30 </html>
運行結果如下：
