文档章节

easyui学习笔记2:页面布局,layout插件

ooad
 ooad
发布于 2015/03/21 12:06
字数 838
阅读 464
收藏 5

一、引言

EasyUI 提供的一种非常便捷的组件easyui-layout,来完成对系统页面的整体布局。它将页面分为北(north)、东(east)、南(south)、西(west)、中(center)等五个部分,代表页面的上、右、下、左、中间(主工作区)等区域。中间的区域面板是必需的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板。布局(layout)可以嵌套,因此用户可建立复杂的布局。

在开发MIS系统中,north区域用于放置系统名称、登陆用户信息、系统级操作(如退出系统、注销、锁屏等);south放置版权声明;west通常作为导航菜单;center用于存放tab窗口展示数据。East比较少用,也可用于参数设置等。

二、创建布局

创建布局需指定元素class="dasyui-layout"。布局有两种方式创建,一种是通过标记创建,即<div id="cc" class="easyui-layout"> </div>。另一种是在整个页面创建布局,即<body class="easyui-layout"></body>。

这里我们采用第二种方式,代码如下:

<html>
<head>
	<meta charset="UTF-8">
	<title>easyui学习笔记</title>
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/icon.css"/>
	<script type="text/javascript" src="jslib/easyui1.3.5/jquery.min.js"></script>
	<script type="text/javascript" src="jslib/easyui1.3.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
</head>
<body class="easyui-layout">
	<div id="head" data-options="region:'north'" style="height:60px;">
		<div style="height:30px;font-size:30px">MISP</div>
	</div>
	<div id="foot" data-options="region:'south'" style="height:30px;text-align: center;background: #D2E0F2">CopyRight:SCAU</div>
	<div id="nav" data-options="region:'west',split:true" style="width:200px" title="导航">
	</div>
	<div id="mainPanle" data-options="region:'center'">
	    <div id="tabs" class="easyui-tabs" data-options="fit:true, border: false" >
	        <div title="About" data-options="iconCls:'icon-tip'">
	            <iframe src="about.html" style="border: 0; width: 100%; height: 98%;" frameBorder="0"></iframe>
	        </div>
	    </div>    
	</div>
</body>
</html>

运行tomcat,在浏览器中输入localhost:8080/easyui/index.html

一句话:so easy so beautiful

三、Layout属性

接下来对代码进行简单解释。

在body中添加若干div, <div>中通常有以下几种参数。

(1) id 用于标记该div,js代码中通过该id关联该div。

(2) data-options对easyui组件的属性设值。

(3) style设置高度、颜色等样式信息。

下面介绍Layout几个常用的属性:

(1) region 属性设置区域,值分别是 north\east\south\west\center。左右两侧的区域( east 和 west )必需指定一个宽度,高度自动适应。上下两侧的区域( north 和 south )则可以根据需要指定或自动高度,当然,宽度是自适应。

(2) split 属性,值为 true/false,在运行时是否可手动调整区域大小。

(3) fit 属性,值为 true/false,当设置为 true 时,就设置布局(layout)的尺寸适应它的父容器。

(4) collapsible属性,值为 true/false,是否显示折叠按钮。

(5) title属性定义每个区域的标题。

(6) iconCls属性,值为icon.css中css class,指定小图标。

还有一些其他的属性,可以从http://www.jeasyui.net/首页下方“所有的Easyui插件”点击相应插件查看其属性和方法。

开始学习时不需要尝试记住它们,就像java的API一样,不知道就查下,多用就会了。


© 著作权归作者所有

ooad
粉丝 93
博文 24
码字总数 17510
作品 0
广州
私信 提问
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
0
9
如何用jquery插件生成的组件添加easyui属性

我想做一个插件来画页面,中间需要用到easyui代码如下: $.fn.workflow=function workflow(){ debug("test"); return this.each(function(){ var target = $(this); var mainDiv = $(' '); m......

spring_李璐
2013/04/08
452
0
jQuery EasyUI使用教程之创建Web页面的边框布局

<jQuery EasyUI最新版下载> 本教程主要为大家演示如何使用jQuery EasyUI创建Web页面的边框布局。该边框布局提供五个区域:east、west、north、south、center,以下是一些常见的用法: north区...

Miss_Hello_World
2015/11/05
0
0
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
0
3

没有更多内容

加载失败,请刷新页面

加载更多

windows下cmd常用的命令

windows下常用的命令指示行: windows下 CMD比较常见的命令1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 4. explorer-------打开资源管理器...

WinkJie
21分钟前
1
0
折叠手机适配布局

CSS Grid 设备相关参数 媒体查询 Chrome进行调试,创建相应的模拟机

lilugirl
22分钟前
0
0
Knative Eventing 中如何实现 Registry 事件注册机制

摘要: 在最新的 Knative Eventing 0.6 版本中新增了 Registry 特性, 为什么要增加这个特性, 该特性是如何实现的。针对这些问题,希望通过本篇文章给出答案。 背景 作为事件消费者,之前是...

阿里云云栖社区
26分钟前
0
0
安装 jemalloc for mysql

前言: Jemalloc 是BSD的提供的内存分配管理 安装依赖 $ yum install -y gcc$ yum install autoconf -y 安装 jemalloc $ git clone https://github.com/jemalloc/jemalloc$ cd jema......

Linux_Anna
36分钟前
2
0
linux下ctrl+c中止不了

有一台centos7的服务器,ctrl+c无效,并且tail -f也无效,只能关掉终端或者crtl+z放入后台再删掉,但是ping的时候使用ctrl+c是有效果的。 出现这种情况的原因可能是因为有人要使用ruby安装r...

gaolongquan
50分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部