一、框架概述

1、什么是Easyui？

2、EasyUI的常用组件

3、EasyUI的特点

缺点

使用：

4、EasyUI的目录说明

4.1 下载路径

4.2 必须的基础支持库

4.3 目录说明

二、WEB项目搭建EasyUI环境

1.EasyUI入门示例

1.1 标准开发步骤

1.2 代码模板

1.3 EasyUI的三大基础概念

1.3.1 属性设置

1.3.2 事件触发设置

1.3.3 方法调用设置

2.注意事项

5.关于组件之间的依赖关系

6.控件使用说明

7.布局·layout

8.面板·panel

8.1 经典示例

一、框架概述

1、什么是Easyui？

EasyUI就是一套基础JQuery的前端框架(简化ajax，jquery，css样式，布局)。可以使用其中的组件进行布局以及用来做后台的管理界面。

EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速提升开发效率。

2、EasyUI的常用组件

① 基础组件：常用的比较小的功能组件，不是每个网页中都会用到
② 布局组件: 很重要，每个网页都会使用，完成网页的布局的。
③ 菜单与按钮组件:很重要，每个网页都会使用，在网页中完成菜单和按钮的效果
④ 表单组件:很重要，搜集用户数据，封装了常用的数据校验，并支持自定义校验
⑤ 窗口组件:在当前页面中显示子窗口效果，对页面中的功能进行完善。
⑥ 数据网格和树组件:很重要，非常之重要。在网页中显示表格以及树状数据

3、EasyUI的特点

easyUI是一种基于jQuery的用户界面插件集合.

easyUI为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyUI你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyUI是个完美支持HTML5网页的完整框架。

easyUI节省了开发产品的时间和规模。

easyUI非常简单，但是功能非常强大

缺点

从效果来看easyui的界面效果要远远差于bootstrap，跟layui比，界面效果也更差

使用：

① 导入EasyUI的资源
② 查阅API文档使用EasyUI的组件完成页面开发

4、EasyUI的目录说明

4.1 下载路径

EasyUI的官网地址为：EasyUI - helps you build your web pages easily

4.2 必须的基础支持库

4.3 目录说明

demo：例示，非常重要，以后做开发，记不起来代码，可以直接复制例示。

demo-moblie：手机端的例示，因为手机端已经有很多优秀UI框架，所以EasyUI在手机端基本没有人用的（忽略）。

locale：编码支持库

plugins：没有压缩过的插件源码

src：没有压缩过的核心源码

themes：主题样式，有个可以选择

easyloader.js：源码加载器

jquery.easyui.min.js：PC使用类库。

jquery.easyui.moblie.js：手机端使用类库

jquery.min.js：Jquery框架

二、WEB项目搭建EasyUI环境

搭建环境的步骤如下：

1. 导入需要的css样式文件。easyui.css    icon.css

2. 导入相关的js文件jquery.min.jsjquery.easyui.min.jsjquery.easyui-lang-zh_CN.js

3. 注意：themes中的文件相对路径不能变。

<!-- 引入EasyUI的css依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/default/easyui.css">

<!-- 引入EasyUI的图标依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/icon.css">

<!-- 引入EasyUI的相关JS依赖 -->
<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>

1.EasyUI入门示例

需求：将a链接标签转换成easy样式按钮。

1.1 标准开发步骤

使用EasyUI中的linkbutton按钮插件实现该需求。

标签： <a href="#">按钮</a>

样式名： 规范: easyui-样式名<a href="#" class="easyui-linkbutton">按钮</a>
js插件名：
$("选中超链接").插件名();
$("a").linkbutton();

1.2 代码模板

实现方式一：HTML标签+EasyUI样式
<!-- HTML标签+EasyUI样式 -->
<a href = "#" class = "easyui-linkbutton">东方不败</a>实现方式二：HTML标签+编程插件方法
<!-- HTML标签+ easyui 插件方法 -->
<a style="color: green;" id="btn1" href="#">风清扬</a>

<script>//使用easyui按钮插件$("#btn1").linkbutton();
</script>

1.3 EasyUI的三大基础概念

分别是：属性，事件，方法

属性指的是EsayUI框架控件（HTML）的属性（设置插件的样式。图标，宽度，高度）

事件指的是 EasyUI 框架控件可以触发的事件（如：点击事件、双击事件等）

方法指的是 EasyUI 框架控件，只有调用了默认执行的逻辑代码块。（修改插件属性，状态。）

1.3.1 属性设置

（1）HTML方式设置

<标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

经典示例


<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">风清扬</a>
（2）基于javascript方式设置

<标签 id = "tag"></标签>
$("#tag").插件名({
   属性名:属性值,
   属性名:属性值
});
注意事项：
   1.字符串类型的数值一定要有引号（单引号，或者双引号都可以）
   2.属性之间使用逗号分隔，最后一个属性不可以有逗号

经典实例

<a style="color: green;" id="btn1" href="#">风清扬</a>
<script>//使用easyui按钮插件$("#btn1").linkbutton({iconCls:'icon-cancel',size:'large'});
</script>

1.3.2 事件触发设置

（1）HTML方式设置[不推荐]

<标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>

经典示例
<a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">王不二</a>
<script>function testEvent(){alert("我被点了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");//调用按钮的 disable方法。//$("按钮").linkbutton('disable');$("a:first").linkbutton('disable');}
</script>
（2）基于javascript方式设置

<标签 id = "tag"></标签>
$("#tag").插件名({
属性名:属性值,
属性名:属性值,
事件名:function(){
}
});

经典示例
<a style="color: green;" id="btn1" href="#">风清扬</a>
<script>//使用easyui按钮插件$("#btn1").linkbutton({onClick:function(){alert("风清扬，被点了。");}
});
</script>

1.3.3 方法调用设置

调用模板：
$("标签").easyui插件名('方法名',方法传入的参数);

例如：
$('#btn1').linkbutton('resize', {
width: '100%',
height: 32
});

2.注意事项

我们必须要理解属性、事件、方法的使用方式，因为所有的EasyUI组件的就是千篇一律地使用上述的这三种概念的知识完成界面的构建以及事件的触发。

问题：EsayUI有很多组件，那么属性、事件、方法、去哪里找呢？

答：直接通过它的官方帮助文档，也可以在代码的src文件夹下查找

--通过官方 API（可以在网上找到中文版的）

--通过src目录与plugins目录的文件代码查看。

src目录是EsayUI的基础模块代码，plugins目录存放的是基于基础模块扩展的控件的实现代码

5.关于组件之间的依赖关系

通过官方的API文档，我们发现有很多控件与控件之间是有依赖关系的。

所以，如果当属性、事件、方法在当前控件找不到，可以去它的父控件上面去寻找。

6.控件使用说明

常用控件：
包括了Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、
DataGrid and Tree（表格和树）、Extension（扩展）

7.布局·layout

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

<div id="cc" class="easyui-layout"  data-options = "fit:true">   <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   </div>

8.面板·panel

panel是最为基础的布局组件，其他layout、accordion和tab等布局组件都要依赖panel。panel是一个容器，在他内部可以创建其他组件。

关于panel面板的属性，事件，方法可查阅API文档了解使用

8.1 经典示例

<!-- panel面板基本示例 -->
<div id = "oDiv" class = "easyui-panel">helloworld<a id = "btn" href = "#" class = "easyui-linkbutton">按钮</a>
</div>
<script type = "text/javascript">$("#oDiv").panel({//设置标题title:'我是标题',//设置图标iconCls:'icon-man',//设置宽度width:500,//设置高度height:400,//可折叠collapsible:true,//可放大maximizable:true,//可缩小minimizable:true,//可关闭closable:true,//绑定按钮组tools:"#btn",//ajax异步加载远程的内容，显示在面板中href:'${pageContext.request.contextPath }/index.jsp'});
</script>