1.引入必要的文件 2.加载 UI 组件的方式 4.Parser 解析器

1 //引入 jQuery 核心库，这里采用的是 2.0 <scripttype="text/javascript"src="easyui/jquery.min.js"></script> //引入 jQuery EasyUI 核心库，这里采用的是 1.3.6 <scripttype="text/javascript"src="easyui/jquery.easyui.min.js"></script>
2  //引入 EasyUI 中文提示信息 <scripttype="text/javascript"src="easyui/locale/easyui-lang-zh_CN.js"></script> 
3 //引入自己开发的 JS 文件 <scripttype="text/javascript"src="js/index.js"></script>
4  //引入 EasyUI 核心 UI 文件 CSS <linkrel="stylesheet"type="text/css"href="easyui/themes/default/easyui.css"/>
5  //引入 EasyUI 图标文件 <linkrel="stylesheet"type="text/css"href="easyui/themes/icon.css"/>

 1 加载 UI 组件有两种方式：1.使用 class 方式加载；2.使用 JS 调用加载
 2 
 3 //使用 class 加载，格式为：easyui-组件名 
 4 
 5 <divclass="easyui-dialog" id="box"title="标题"style="width:400px;height:200px;"> 内容部分 </div>
 6 
 7 PS：使用了规定的格式就可以生成一个 UI 组件，这是由于 jQueryEasyUI 的一个解析 器（Parser）的起到了作用。解析之后，从 Firebug 里面可以看到 UI 组件变化后的 HTML
 8 
 9 
10 
11 
12 //使用 JS 调用加载 
13 
14 $(‘#box‘).dialog();
15 
16 PS：一般推荐使用第二种 JS 调用加载，因为一个 UI 组件有很多属性和方法，如果使 用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则，第二种提高了代码的 可读性。

 1 Parser 解析器是专门解析渲染各种 UI 组件了，一般来说，我们并不需要使用它即可 自动完成 UI 组件的解析工作。当然，有时可能在某些环境下需要手动解析的情况。 手动解析一般是使用 class 的情况下有效，比如设置 class="easyui-dialog"。
 2 
 3 
 4 Parser 属性
 5 
 6  属性名 默认值 说明
 7 $.parser.auto true 定义是否自动解析 EasyUI 组件
 8 
 9 //关闭自动解析功能，放在$(function() {})外 $.parser.auto = false;
10 
11 Parser 方法 
12 
13 属性名 传参 说明
14 $.parser.parse 空或 JQ 选择器 解析指定的 UI 组件
15 $.parser.onComplete 回调函数 解析完毕后执行
16 
17 //解析所有 UI 
18 $.parser.parse();
19 
20 //解析指定的 UI
21 $.parser.parse(‘#box‘);
22 
23 
24 PS：使用指定 UI 解析，必须要设置父类容器才可以解析到。比如： 
25 
26 <divid="box"> <divclass="easyui-dialog" title="标题"style="width:400px;height:200px;"> <span>内容部分</span> </div> </div>
27 
28 
29 //UI 组件解析完毕后执行，放在$(function () {})外 
30 
31 $.parser.onComplete = function () { alert(‘UI 组件解析完毕！‘); };