EasyUI學習總結(六)——EasyUI布局

本文轉載自查看原文 2015-03-05 16:17 25748 Jquery EasyUI學習使用總結/ EasyUI學習總結

一、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>

　　運行結果如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 EasyUI學習總結(一)——EasyUI入門 EasyUI學習總結(五)——EasyUI組件使用【EasyUI】——EasyUI的布局近階段學習總結（EasyUI的使用） EasyUI –tree、combotree學習總結 EasyUI_Datagrid學習總結 EasyUI學習總結(四)——parser源碼分析 easyui---layout布局 EasyUI學習總結(二)——easyloader分析與使用 easyui