使用Easyui
1、引入必要的文件
1）、jquery核心库
2）、easyui核心库
3）、easyui中文提示信息
4）、自己开发的js文件
5）、easyui核心UI文件css
6）、easyui图标文件
引入完毕就可以开始写代码了
加载UI组件的方式
1、使用class方式加载
使用class加载，格式为：easyui-组件名
<div id="box" class="easyui-dialog" title="标题" style="400px; height:200px;">
内容部分
</div>
2、通过js调用加载
<div id="box" title="标题" style="400px; height:200px;">
内容部分
</div>
$(function(){
$("#box").dialog();
});
一般推荐使用第二种：js调用加载，因为一个UI组件有很多属性和方法，如果使用class的用法将极大的不方便。
使用easyload.js智能加载
easyui算是一个比较重的前端框架了，有些时候可以不向前面一样引入easyui的那些组件，而是引入easyuiloader.js,然后在js中调用加载组件，自动进行动态加载js，可以节约很大部分空间。
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/easyloader.js"></script>
<script type="text/javascript" src="../../js/01/t1.js"></script>
<div id="box" title="标题" style="400px; height:200px;">
内容部分
</div>
$(function(){
easyloader.load('dialog',function(){
$("#box").dialog();
});
});
这里必须JS调用在easyloader的load方法的对应function内。第一个参数是所用到的组件名，为String数组。
parser解析器
parser解析器是专门解析渲染各种UI组件，一般，我们不需要使用它即可完成。当然，某些环境下我们需要手动解析。
手动解析一般是使用class的情况下有效，比如设置class = “easyui-dialog”
parser属性：
属性名 默认值 说明
$.parser.auto true 定义是否自动解析EasyUI组件
//关闭自动解析功能，放在$(function(){})外
parser方法：
属性名 传参 说明
$.parser.parse 空或JQ选择器 解析指定的UI组件
$.parser.onComplete 回调函数 解析完毕后执行
将其他js回到开始的时候，
div id="box" class="easyui-dialog" title="标题" style="400px; height:200px;">
内容部分
</div>
$.parser.auto = false; //关闭自动解析
$.parser.onComplete = function(){ //解析回调
alert("解析完毕！");
}
$(function(){
//$("#box").dialog();
//$.parser.parse(); -- 这个表示解析所有组件
$.parser.parse("box");
});
如果解析指定组件的话，解析的选择器选择的是组件的父容器。
<div id="box">
<div id="box" class="easyui-dialog" title="标题" style="400px; height:200px;">
内容部分
</div>
</div>