使用 JQuery EasyUI

学习要点：
     1.引入必要的文件
     2.加载 UI 组件的方式
     3.使用 easyload.js 智能加载
     4.Parser 解析器

本文重点了解 EasyUI 的两种使用方法，包含不一样的加载已经 easyload 智能按需加载。最后了解一下 Parser 解析器的用法。

注意：全部的代码将在文章的最后页统一引入

一． 引入必要的文件

因为刚刚更新了 jQuery EasyUI1.4.4，这个小微版本的更新主要是内部优化和 UI 的一些微调，自己不影响学习。以前咱们采用 1.2.4 版本的中文手册学习 1.3.5 都没有什么
障碍，因此，没必要担忧版本问题。

咱们在整个文章中JQuery  EasyUI的目录结构都以下图所示

easyui文件夹是保存JQuery EasyUI的全部要使用的文件

JS文件夹是保存咱们本身的JS文件的

index.html是保存咱们本身书写的html代码

 1 //引入 jQuery 核心库，这里采用的是 2.0
 2 <script type="text/javascript" src="easyui/jquery.min.js"></script>
 3 //引入 jQuery EasyUI 核心库，这里采用的是 1.4.4
 4 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 5 //引入 EasyUI 中文提示信息
 6 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
 7 //引入本身开发的 JS 文件
 8 <script type="text/javascript" src="js/index.js"></script>
 9 //引入 EasyUI 核心 UI 文件 CSS
10 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
11 //引入 EasyUI 图标文件
12 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

PS：引入完毕后，咱们就能够编写 jQuery EasyUI 代码了。

2、加载 UI  组件的方式

加载 UI 组件有两种方式：1.使用 class 方式加载；2.使用 JS 调用加载。

1 //使用 class 加载，格式为：easyui-组件名
2 <div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">
3 内容部分
4 </div>

PS：使用了规定的格式就能够生成一个 UI 组件，这是因为 jQuery EasyUI 的一个解析器（Parser）的起到了做用。解析以后，从 Firebug 里面能够看到 UI 组件变化后的 HTML。

//使用 JS 调用加载
$('#box').dialog();

PS：通常推荐使用第二种 JS 调用加载，由于一个 UI 组件有不少属性和方法，若是使用 class 的用法将极大的不方便。而且根据 JS 和 HTML 分离的原则，第二种提升了代码的可读性。

三． 使用 easyload.js  智能加载

//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>

//JS 代码
easyloader.load('dialog', function () {
    $('#box').dialog();
});

PS：使用 easyloader 智能加载，是根据你使用的 UI 组件按需加载。咱们能够经过Firebug 查看 HTML， 发现加载了很是多的 js 文件， 这些 js 都是 dialog 组件的必须条件。因此，使用 easyloader 加载会减小没必要要的内容加载。但问题是，使用智能加载，你编码的难度和成本都提升了，效率下降，而且智能加载的 js 文件数量仍是很是多的，并不会提升太大的速度，反而由于 js 文件较多，被搜索引擎要求合并优化。

4、Parser  解析器

Parser 解析器是专门解析渲染各类 UI 组件了，通常来讲，咱们并不须要使用它便可自动完成 UI 组件的解析工做。固然，有时可能在某些环境下须要手动解析的状况。
手动解析通常是使用 class 的状况下有效，好比设置 class="easyui-dialog"。

Parser 属性

属性名                 默认值           说明
$.parser.auto      true              定义是否自动解析 EasyUI 组件

//关闭自动解析功能，放在$(function() {})外
$.parser.auto = false;

Parser 方法

属性名                              传参                        说明
$.parser.parse                  空或 JQ 选择器          解析指定的 UI 组件
$.parser.onComplete         回调函数                  解析完毕后执行

//解析全部 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse('#box');

PS：使用指定 UI 解析，必需要设置父类容器才能够解析到。好比：

<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
<span>内容部分</span>
</div>
</div>

//UI 组件解析完毕后执行，放在$(function () {})外
$.parser.onComplete = function () {
    alert('UI 组件解析完毕！');
};