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

//引入 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>
 //引入 EasyUI 中文提示信息 <scripttype="text/javascript"src="easyui/locale/easyui-lang-zh_CN.js"></script> 
//引入自己开发的 JS 文件 <scripttype="text/javascript"src="js/index.js"></script>
 //引入 EasyUI 核心 UI 文件 CSS <linkrel="stylesheet"type="text/css"href="easyui/themes/default/easyui.css"/>
 //引入 EasyUI 图标文件 <linkrel="stylesheet"type="text/css"href="easyui/themes/icon.css"/>

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

//使用 class 加载，格式为：easyui-组件名 

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

PS：使用了规定的格式就可以生成一个 UI 组件，这是由于 jQueryEasyUI 的一个解析 器（Parser）的起到了作用。解析之后，从 Firebug 里面可以看到 UI 组件变化后的 HTML




//使用 JS 调用加载 

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

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

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 解析，必须要设置父类容器才可以解析到。比如： 

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


//UI 组件解析完毕后执行，放在$(function () {})外 

$.parser.onComplete = function () { alert('UI 组件解析完毕！'); };