EasyUI学习总结(六)——EasyUI布局（转载）
本文转载自：http://www.cnblogs.com/xdp-gacl/p/4088198.html
一、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>
运行结果如下：
