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

转载 2016年08月30日 18:05:00

一、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>
复制代码

  运行结果如下:

  


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

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

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

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

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

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

EasyUI学习总结(三)——easyloader源码分析

声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去!   easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分...

EasyUI学习总结(三)——easyloader源码分析

easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头...

EasyUI学习总结(三)——easyloader源码分析

easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头...

EasyUI学习笔记(六)——学习读源码--parser源码阅读分析2

parser模块整理:对数组操作的5个方法

EasyUI学习第四篇:Layout布局

学会使用Layout组件布局 accordion手风琴组件 tabs组件的使用 Layout 布局依赖 panel resizable ...

jQuery Easy UI学习(1)——如何使用easyui,导入js顺序

 一、首先在WebRoot目录下创建js文件夹,导入压缩好的完整的easy-ui的js包。 二、在HTML的页面中导入easy ui 的js  1、一次导入所有js:(建议用这种) ....

S2SH 学习笔记之easyui——表单传递类对象

SS2H下,前台如何将一个自定义类对象传值给后台
  • tomyi
  • tomyi
  • 2016年04月28日 13:46
  • 719
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:EasyUI学习总结(六)——EasyUI布局
举报原因:
原因补充:

(最多只允许输入30个字)