前言：之前一段时间跟大家分享了MySQL的知识，今天跟大家分享的知识是关于框架————EasyUI，而今天主要是讲EasyUI中的LayOut布局。
一、EasyUI的含义（3个w）
1、what：jquery+Html4快速开发的前段框架。
2、why：
2.1从金钱的角度上，开发首先会排除掉bootstrap
2.2从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要
优于layui
2.3从公司的角度考虑选用那个框架
成本、公司的后端技术人员前端功底、前端的社区活跃度
3、where：主要用途在前端和后端的开发。
二、学习方法：
1、easyui-api(使用手册)：在下载easyui时可以下载一个api使用手册，可以帮助我们更好的学习EasyUI
其中有告诉大家怎么去使用easyui，以及各个控件的使用说明,例如说layout布局的使用说明。
2、使用demo：直接可以在上面放置需要的代码：
三、控件：
1、EasyUI的控件主要有以后几种：Layout、tree、tabs、datagrid、form、messeger、combobox，而今天主要跟大家分享的是Layout布局。
2、Layout布局：
1、使用方法：使用$.fn.layout.defaults重写默认值对象。
2、Layout布局区域：布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
3、布局属性：
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| fit | boolean | 如果设置为true，布局组件将自适应父容器。当使用'body'标签创建布局的时候，整个页面会自动最大。 | false |
4、事件：
| 事件名 | 事件参数 | 描述 |
|---|---|---|
| onCollapse | region | 在折叠区域面板的时候触发。（该事件自1.4.4版开始可用） |
| onExpand | region | 在展开区域面板的时候触发。（该事件自1.4.4版开始可用） |
| onAdd | region | 在新增区域面板的时候触发。（该事件自1.4.4版开始可用） |
| onRemove | region | 在移除区域面板的时候触发。（该事件自1.4.4版开始可用） |
5、区域面板属性
区域面板属性定义与panel组件类似，下面的是公共的和新增的属性：
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| title | string | 布局面板标题文本。 | null |
| region | string | 定义布局面板位置，可用的值有：north, south, east, west, center。 | |
| border | boolean | 为true时显示布局面板边框。 | true |
| split | boolean | 为true时用户可以通过分割栏改变面板大小。 | false |
| iconCls | string | 一个包含图标的CSS类ID，该图标将会显示到面板标题上。 | null |
| href | string | 用于读取远程站点数据的URL链接 | null |
| collapsible | boolean | 定义是否显示折叠按钮。（该属性自1.3.3版开始可用） | true |
| minWidth | number | 最小面板宽度。（该属性自1.3.3版开始可用） | 10 |
| minHeight | number | 最小面板高度。（该属性自1.3.3版开始可用） | 10 |
| maxWidth | number | 最大面板宽度。（该属性自1.3.3版开始可用） | 10000 |
| maxHeight | number | 最大面板高度。（该属性自1.3.3版开始可用） | 10000 |
| expandMode | string | 在点击折叠面板时候的扩展模式。可用值有：“float”、“dock”和null float：区域面板将展开并浮动在顶部，在鼠标焦点离开面板时会自动隐藏。 dock：区域面板将展开并钉在面板上，在鼠标焦点离开面板时不会自动隐藏。 null：什么也不会发生。 （该属性自1.4.4版开始可用） | float |
| collapsedSize | number | 折叠后的面板大小。（该属性自1.4.4版开始可用） | 28 |
| hideExpandTool | boolean | 为true时隐藏折叠面板上的扩展面板工具。（该属性自1.4.4版开始可用） | false |
| hideCollapsedContent | boolean | 为true时隐藏折叠面板上的标题栏。（该属性自1.4.4版开始可用） | true |
| collapsedContent | string,function(title) | 定义在折叠面板上要显示标题内容。 1. 标题字符串； 2. 通过函数返回标题内容。 （该方法自1.4.4版开始可用） 代码示例： collapsedContent: function(title){
var region = $(this).panel('options').region;
if (region == 'north' || region == 'south'){
return title;
} else {
return '<div class="mytitle">'+title+'</div>';
}
} |
6、方法：
| 方法名 | 方法属性 | 描述 |
|---|---|---|
| resize | param | 设置布局大小。param对象包含如下属性： 代码示例： $('#cc').layout('resize', {
width:'80%',
height:300
}) |
| panel | region | 返回指定面板，'region'参数可用值有：'north','south','east','west','center'。 |
| collapse | region | 折叠指定面板。'region'参数可用值有：'north','south','east','west'。 |
| expand | region | 展开指定面板。'region'参数可用值有：'north','south','east','west'。 |
| add | options | 添加指定面板。属性参数是一个配置对象，更多细节请查看选项卡面板属性。 |
| remove | region | 移除指定面板。'region'参数可用值有：'north','south','east','west'。 |
| split | region | 分割区域面板。'region'参数可用值有：'north','south','east','west'。（该方法自1.4.2版开始可用） 代码示例： |
| unsplit | region | 移除指定面板。'region'参数可用值有：'north','south','east','west'。（该方法自1.4.2版开始可用） 代码示例： |
6、具体实现方法：
思路：1、首先同样创建一个web项目，
2、之后在webcontent中新建一个新的Folder文件夹，名字取为static，其中static中在新建三个Folder文件夹,分别为css(主要放样式)、images（主要放图片）、js（放样式）、以及doc（主要放文字）。
3、再建一个jsp界面，里面放置的是layout的样式代码：（注意是要绝对路径，而不是相对路径）
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
之前的代码是这样的，但是要改成绝对路径变为上面的，选中下方的红色字体，再按住Ctrl+shift+r就可以进行变为全路径（要写${ pageContext.request.contextPath }）。
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
按住Ctrl+shift+r效果：（选中对应文件就行）
4、在之后将Layout样式写上去：
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'书籍列表',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'版权所有',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'菜单管理',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'内容摘要'" style="padding:5px;background:#eee;"></div>
</div> 
7、展现效果：
四：思维导图：
2868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
