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

原创
2015/03/21 12:06
阅读数 639

一、引言

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一样,不知道就查下,多用就会了。


展开阅读全文
打赏
2
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
2
分享
返回顶部
顶部