EasyUI学习总结(六)——EasyUI布局
来源:互联网 发布:仿真软件培训 编辑:程序博客网 时间:2024/05/19 19:56
一、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>
运行结果如下:
阅读全文
0 0
- EasyUI学习总结(六)——EasyUI布局
- EasyUI学习总结(六)——EasyUI布局
- EasyUI学习总结(六)——EasyUI布局
- EasyUI学习总结(六)——EasyUI布局
- EasyUI学习总结(六)——EasyUI布局
- EasyUI学习总结(六)——EasyUI布局
- EasyUI学习总结——EasyUI布局
- EasyUI学习总结(二)——EasyUI布局
- EasyUI学习总结(二)——EasyUI布局
- EasyUI学习总结——EasyUI入门
- JQuery EasyUI 学习——使用EasyUI 页面布局
- 【EasyUI】——EasyUI的布局
- EasyUI学习总结(一)——EasyUI入门
- EasyUI学习总结(五)——EasyUI组件使用
- EasyUI学习总结(一)——EasyUI入门
- EasyUI学习总结(三)——EasyUI组件使用
- EasyUI学习总结(一)——EasyUI入门
- EasyUI学习总结(五)——EasyUI组件使用
- 0159 使用 Linux 搭建 VPN
- 结算平台的搭建
- JVM面试题
- Spring Security(05)——异常信息本地化
- Activity的启动模式和任务栈解析
- EasyUI学习总结(六)——EasyUI布局
- android 新增分区以及挂载方法
- 看公司代码时的一些记录
- mysql存储过程中变量的使用
- Spring Security(06)——AuthenticationProvider
- XML的声明
- unity优化篇
- poj_2115-C Looooops
- 深入理解Spark 2.1 Core (十三):sparkEnv类源码分析