（一）JQuery EasyUI：使用

（一）JQuery EasyUI：使用

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

1.引入必要的文件

<!--引入 jQuery 核心库--><script type="text/javascript" src="easyui/js/jquery.min.js"></script><!--引入 jQuery EasyUI 核心库--><script type="text/javascript" src="easyui/js/jquery.easyui.min.js" ></script><!--引入 EasyUI 中文提示信息--><script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script><!--引入 EasyUI 核心 UI 文件 CSS--><link rel="stylesheet" href="easyui/themes/default/easyui.css" /><!--引入 EasyUI 图标文件--><link rel="stylesheet" href="easyui/themes/icon.css" />

2.加载UI组件的方式

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

a.使用class方式加载；

//1.使用class加载，格式为：easyui-组件名<div class="easyui-dialog" style="width:400px;height:200px" data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">dialog content</div>

b.使用JS调用加载

$("#box").dialog();

PS：一般推荐使用第二种JS调用加载，因为一个UI组件有很多属性和方法，如果使用class的用法将极大的不方便。并且根据JS和HTML分离的原则，第二种提高了代码的可读性。

3.使用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>

easyloader.load()智能加载ui组件，参数第一个是组件名称，第二个是函数，在函数里写加载组件

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 ：

$(function () {});$.parser.auto = false;   //用于定义是否自动解析 EasyUI 组件（默认为true）

//关闭自动解析功能，放在$(function() {})外

Parser方法

$.parser.parse：参数->(空或 JQ 选择器) 用于解析指定的 UI 组件

<!--解析所有UI-->$.parser.parse();<!--解析指定的UI-->$.parser.parse('#box');<!--PS：使用指定UI解析，必须要设置父类容器才可以解析到。如下-->

$.parser.onComplete：参数->(回调函数) 解析完毕后执行

<!--parser--><div id="box"><div class="easyui-dialog" title="标题" style="width:400px;height:200px;"><span>内容部分</span></div></div><!--UI 组件解析完毕后执行，放在$(function () {})外-->
$.parser.onComplete = function () {alert('UI 组件解析完毕！');};