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

拼搏现实的明天。 2022-09-23 03:46 141阅读 0赞

## 一、EasyUI布局介绍 ##

easyUI布局容器包括东、西、南、北、中五个区域，其中中心面板是必须的，而东、西、南、北这四个面板是可选的，如果布局里面不需要东、西、南、北这四个面板，那么可以把相应的div删掉，另外，如果需要创建复杂的easyUI布局，那么可以通过嵌套东、西、南、北、中五个面板来实现。下面简单演示一下EasyUI布局。

1.1、通过div创建easyUI布局

easyUI的layout可以通过div来创建，使用div来创建easyUI的layout，那么div的html代码结构必须要如下的结构：

![复制代码][copycode.gif]

1 
     2       <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
     3            
     4         <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
     5            
     6         <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
     7            
     8         <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
     9           
    10         <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    11          
    12         <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
    13      </div>

![复制代码][copycode.gif]

看看完整的范例：

![复制代码][copycode.gif]

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      
     7       <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
     8       
     9       <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    10       
    11       <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    12       
    13       <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
    14       
    15       <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
    16   </head>
    17   
    18   <body>
    19       
    20       <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
    21            
    22         <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    23            
    24         <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
    25            
    26         <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    27           
    28         <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    29          
    30         <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
    31      </div>  
    32   </body>
    33 </html>

![复制代码][copycode.gif]

运行结果如下图所示：

![Center][]

1.2、通过body创建easyUI布局

![复制代码][copycode.gif]

1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title>EasyUI布局</title>
     5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     6      
     7       <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
     8       
     9       <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    10       
    11       <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    12       
    13       <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
    14       
    15       <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
    16   </head>
    17   
    18   <body class="easyui-layout">
    19        
    20     <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    21        
    22     <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
    23        
    24     <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    25       
    26     <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    27      
    28     <div data-options="region:'center',title:'center title',href:'center.html'" style="padding:5px;"></div>  
    29  </body>  
    30   
    31 </html>

![复制代码][copycode.gif]

运行结果如下所示：

![Center 1][]

### 1.3、使用嵌套easyui-layout来创建复杂布局 ###

![复制代码][copycode.gif]

1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title>EasyUI布局</title>
     5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     6      
     7       <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
     8       
     9       <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    10       
    11       <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    12       
    13       <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
    14       
    15       <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
    16   </head>
    17   
    18   <body class="easyui-layout">  
    19     <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
    20       
    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             
    26             <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    27                
    28             <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
    29                
    30             <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    31               
    32             <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    33              
    34             <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
    35         </div>  
    36     </div>  
    37   </body>  
    38 </html>

![复制代码][copycode.gif]

运行结果如下所示：

![Center 2][]

### 1.4、通过Javascript创建easyUI布局 ###

![复制代码][copycode.gif]

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      
     7       <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
     8       
     9       <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    10       
    11       <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    12       
    13       <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
    14       
    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   
    24   <body id="easyUILayoutBody">  
    25     <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
    26       
    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>

![复制代码][copycode.gif]

运行结果如下：

![Center 3][]

[copycode.gif]: /images/20220721/5899fc37aaf44bcb886f4dfb59964afd.png
[Center]: /images/20220721/96d515e94f4642b3913989aff009936f.png
[Center 1]: /images/20220721/862757e4943a4270b5fc820e61ee4b90.png
[Center 2]: /images/20220721/e39aa78129074231a4ef4e4c7dbac9d1.png
[Center 3]: /images/20220721/8f6dc24db60e4076b09b9a3c79e80616.png

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery EasyUI 布局 - 创建折叠面板

在本教程中，您将会学习到关于 easyui 折叠面板（Accordion）的知识。折叠面板（Accordion）包含一系列的面板（panel）。所有面板（panel）的头部

妖狐艹你老母/ 2024年03月23日 16:22/ 0 赞/ 70 阅读

相关 EasyUI学习总结(三)——EasyUI组件使用

一、EasyUI组件的简单介绍　　easyUI提供了很多组件让我们使用，如下图所示：　　![Center][] 　　使用这些组件可以帮助我们快速地进行项目开发，下

水深无声/ 2022年09月23日 03:46/ 0 赞/ 362 阅读

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

一、EasyUI布局介绍　　easyUI布局容器包括东、西、南、北、中五个区域，其中中心面板是必须的，而东、西、南、北这四个面板是可选的，如果布局里面不需要东、西、南、

拼搏现实的明天。/ 2022年09月23日 03:46/ 0 赞/ 142 阅读

相关 EasyUI学习总结(一)——EasyUI入门

一、EasyUI下载　　EasyUI官方下载地址：http://www.jeasyui.com/download/index.php，目前最新的版本是：jQue

你的名字/ 2022年09月23日 03:45/ 0 赞/ 262 阅读

相关（札记）EasyUI Layout 布局管理

界面使用html的标签及css样式配合easyui编写组件的动作使用jquery来控制折叠面板： <pre class="ja

桃扇骨/ 2022年08月06日 06:15/ 0 赞/ 211 阅读

相关 Easyui 问题总结

最近使用Easyui，其中遇到一些问题，在这里记载一下，以备将来查找。 1，在使用linkbutton时，遇到icon-add图标不显示，其他图标都能显示的情况。经过在ch

朱雀/ 2022年07月15日 13:39/ 0 赞/ 172 阅读

相关 11、EasyUI的布局

EasyUI的布局给外层添加class=”easyui-layout” 属性： region:’方向’ <body> <div clas

爱被打了一巴掌/ 2022年06月01日 22:51/ 0 赞/ 164 阅读

相关 easyui学习记录：combotree的使用总结

一、简介：　　combotree控件是对combo（自定义下拉框）与tree（树）控件的扩展，它与combobox（下拉列表框）类似，但是它将下拉列表框的列表替换成了树

落日映苍穹つ/ 2022年01月15日 00:41/ 0 赞/ 733 阅读

相关 easyUI学习笔记二

1．拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title>

àì夳堔傛蜴生んèń/ 2021年12月07日 10:04/ 0 赞/ 280 阅读

相关 easyui二次开发

今天发现一个easyui的二次开发项目：下载地址：[https://github.com/cjw0511/jquery-extensions/][https_gith

青旅半醒/ 2021年06月24日 14:00/ 0 赞/ 560 阅读