一、引言
EasyUI 提供的一种非常便捷的组件easyui-layout,来完成对系统页面的整体布局。它将页面分为北(north)、东(east)、南(south)、西(west)、中(center)等五个部分,代表页面的上、右、下、左、中间(主工作区)等区域。中间的区域面板是必需的,边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸,也可以通过点击折叠触发器来折叠面板。布局(layout)可以嵌套,因此用户可建立复杂的布局。
在开发MIS系统中,north区域用于放置系统名称、登陆用户信息、系统级操作(如退出系统、注销、锁屏等);south放置版权声明;west通常作为导航菜单;center用于存放tab窗口展示数据。East比较少用,也可用于参数设置等。
二、创建布局
创建布局需指定元素class="dasyui-layout"。布局有两种方式创建,一种是通过标记创建,即
这里我们采用第二种方式,代码如下:
easyui学习笔记运行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一样,不知道就查下,多用就会了。