easyui（快速入门）

1.jQuery EasyUI框架概述

1.1 什么是jQuery EasyUI?

1.2 jQuery Easy的作用

1.3 EasyUI的目录说明

2.WEB项目搭建EasyUI环境

3.EasyUI入门示例

4.注意事项

# jQuery EasyUI课程

>
>
> **jQuery EasyUI简介：封装大量的jQuery插件(简化ajax，jquery，css样式，布局)**
>
>
>
> **学习目标：**
>
> ![模型](01.easyUI.assets/模型.png)
>
> **学习内容：**
>
> ```html
> 插件实现:
> ① HTML标签+插件的class样式。
> <a href="#" class="easyui-linkbutton">我是讲文明</a>
> ② HTML标签+基于编程的插件实现
> <a href='#' id="btn">我是ZKING ZZ</a>
> js代码： $("#btn").linkbutton();
>
> 插件内容：
> 属性：设置插件的样式。图标，宽度，高度。
> 事件：单击事件，双击
> 方法：修改插件属性，状态。
> ```
>
> **学习方法：**
>
> ```html
> 1. 掌握easyui插件开发模板[记住]
> 2. 通过文档配合，学习他的属性事件方法。[查看文档]
> ```

day_01 EasyUI （入门）

1.jQuery EasyUI框架概述

1.1 什么是jQuery EasyUI?

> JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架

1.2 jQuery Easy的作用

既然EasyUI是一个UI框架，所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。

> 现在市面有哪些常用富客户端框架：EasyUI、LigerUI、ExtJS

1.3 EasyUI的目录说明

1.3.1 下载路径

EasyUI的官网地址为：http://www.jeasyui.com/

1.3.2 必须的基础支持库

标红的文件夹是PC端使用EasyUI框架，必须导入的基础库文件。

![1665938-20190723193247068-1663752670](01.easyUI.assets/3f4fcc3d9c494f198775fe7e96f12dc0.png)

1.3.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框架

2.WEB项目搭建EasyUI环境

> 搭建环境的步骤如下：
>
> ```HTML
> 1. 导入需要的css样式文件。easyui.css icon.css
>
> 2. 导入相关的js文件
> jquery.min.js
> jquery.easyui.min.js
> jquery.easyui-lang-zh_CN.js
>
> 3. 注意：
> themes中的文件相对路径不能变。
> ```

![](01.easyUI.assets/微信截图_20220316102915.png)

```HTML

<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/default/easyui.css">

<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/icon.css">

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

```

3.EasyUI入门示例

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

3.1 标准开发步骤

> 使用EasyUI中的**linkbutton按钮插件**实现该需求。
>
> ```HTML
> 标签： <a href="#">按钮</a>
>
> 样式名：规范: easyui-样式名
> <a href="#" class="easyui-linkbutton">按钮</a>
> js插件名：
> $("选中超链接").插件名();
> $("a").linkbutton();
> ```

3.2 代码模板

> - 实现方式一：HTML标签+EasyUI样式
>
> ```jsp
> 
> <a href = "#" class = "easyui-linkbutton">东方不败</a>
> ```
>
> - 实现方式二：HTML标签+编程插件方法
>
> ```jsp
> 
> <a style="color: green;" id="btn1" href="#">风清扬</a>
>
> <script>
> //使用easyui按钮插件
> $("#btn1").linkbutton();
> </script>
> ```

3.3 EasyUI的三大基础概念

> 分别是：**属性，事件，方法**
>
> - 属性指的是EsayUI框架控件（HTML）的属性（设置插件的样式。图标，宽度，高度）
> - 事件指的是 EasyUI 框架控件可以触发的事件（如：点击事件、双击事件等）
> - 方法指的是 EasyUI 框架控件，只有调用了默认执行的逻辑代码块。（修改插件属性，状态。）

3.3.1 属性设置

> **（1）HTML方式设置**
>
> ```html
> <标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>
> ```
>
> **经典示例**
>
> ```JSP
> 
> 
> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',size:'large',onClick:testEvent">风清扬</a>
> ```
>
> **（2）基于javascript方式设置**
>
> ```HTML
> <标签 id = "tag"></标签>
> $("#tag").插件名({
>    属性名:属性值,
>    属性名:属性值
> });
> 
> ```
>
> **经典实例**
>
> ```JSP
> 
> <a style="color: green;" id="btn1" href="#">风清扬</a>
> <script>
>    //使用easyui按钮插件
>    $("#btn1").linkbutton({
>        iconCls:'icon-cancel',
> size:'large'
>    });
> </script>
> ```

3.3.2 事件触发设置

> **（1）HTML方式设置[不推荐]**
>
> ```HTML
> <标签 class = "easyui-样式名" data-options = "属性名:值,属性名:值,事件名:事件函数名"></标签>
> ```
>
> **经典示例**
>
> ```HTML
> <a href="#" class="easyui-linkbutton" data-options="onClick:testEvent">黄浩</a>
> <script>
>    function testEvent(){
>        alert("我被点了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
>        //调用按钮的 disable方法。
>        //$("按钮").linkbutton('disable');
>        $("a:first").linkbutton('disable');
>    }
> </script>
> ```
>
> **（2）基于javascript方式设置**
>
> ```HTML
> <标签 id = "tag"></标签>
> $("#tag").插件名({
>    属性名:属性值,
>    属性名:属性值,
>    事件名:function(){
>
>    }
> });
> ```
>
> **经典示例**
>
> ```HTML
> <a style="color: green;" id="btn1" href="#">风清扬</a>
> <script>
>    //使用easyui按钮插件
>    $("#btn1").linkbutton({
>        onClick:function(){
>        alert("风清扬，被点了。");
>    }
> });
> </script>
> ```

3.3.3 方法调用设置

> ```java
> 调用模板：
> $("标签").easyui插件名('方法名',方法传入的参数);
>
> 例如：
> $('#btn1').linkbutton('resize', {
> width: '100%',
> height: 32
> });
>
> ```

4.注意事项

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

> 问题：EsayUI有很多组件，那么属性、事件、方法、去哪里找呢？
>
> 答：**直接通过它的官方帮助文档，也可以在代码的src文件夹下查找**
>
> --通过官方 API（可以在网上找到中文版的）
>
> ![1665938-20190723193218271-1657769772](01.easyUI.assets/1665938-20190723193218271-1657769772.png)
>
> --通过src目录与plugins目录的文件代码查看。
>
> src目录是EsayUI的基础模块代码，plugins目录存放的是基于基础模块扩展的控件的实现代码
>
> ![](01.easyUI.assets/1665938-20190723193215844-808758476.png)