EasyUI入门

前言：之前一段时间跟大家分享了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对象包含如下属性： width：布局宽度。 height：布局高度。 代码示例： $('#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版开始可用） 代码示例： $("#layout").layout("split", "west");
unsplit	region	移除指定面板。'region'参数可用值有：'north','south','east','west'。（该方法自1.4.2版开始可用） 代码示例： $("#layout").layout("unsplit", "west");

                 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、展现效果：

 四：思维导图：

 总结：今天的知识就分享到这了，希望自己分享的知识对大家有帮助，最后祝大家生活愉快！