EasyUI学习总结(二)——EasyUI布局

来源：互联网发布：mac音频播放器编辑：程序博客网时间：2024/05/17 22:45

一、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的layout19               $('#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>

　　运行结果如下：

阅读全文

1 0