easyUI——easyUI（入门）

目录

easyUI

1.jQuery EasyUI框架概述

1.1 什么是jQuery EasyUI?

1.2 jQuery Easy的作用

1.3 EasyUI的目录说明

2.WEB项目搭建EasyUI环境

3.EasyUI入门示例

3.1 标准开发步骤

3.2 代码模板

3.3 EasyUI的三大基础概念

---

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框架，必须导入的基础库文件。

 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中的文件相对路径不能变。

```HTML
<!-- 引入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>

3.EasyUI入门示例

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

3.1 标准开发步骤

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

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

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

   $("a").linkbutton();

3.2 代码模板

- 实现方式一：HTML标签+EasyUI样式

```jsp
<!-- HTML标签+EasyUI样式 -->
<a href = "#" class = "easyui-linkbutton">东方不败</a>
 ```

 - 实现方式二：HTML标签+编程插件方法

```jsp
<!-- HTML标签+ easyui 插件方法 -->
 <a style="color: green;" id="btn1" href="#">风清扬</a>

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

3.3 EasyUI的三大基础概念

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