easyui在html页面布局,easyui学习笔记2：页面布局，layout插件

一、引言

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

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

二、创建布局

创建布局需指定元素class="dasyui-layout"。布局有两种方式创建，一种是通过标记创建，即

这里我们采用第二种方式，代码如下：

easyui学习笔记

MISP

CopyRight:SCAU

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

一句话：so easy so beautiful

三、Layout属性

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

在body中添加若干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一样，不知道就查下，多用就会了。