jQuery Easy UI的使用
一、初步认识
1、什么是jQuery Easy UI
jQuery Easy UI是一组基于jQuery的UI插件集合，而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。
官方网站http://www.jeasyui.com
2、jQuery EasyUI有哪些特点
（1）、基于 jquery 用户界面插件的集合；
（2）、源代码加密、商业版付费
（3）、使用 EasyUI 你不需要写很多的 javascript 代码，通常只需要写 HTML 标记来定义用户界面即可；
（4）、支持 HTML5
（5）、简单，但很强大，开发产品时可节省时间和资源；
（6）、支持拓展，可根据自己的需求拓展控件
3、是否兼容低版本IE ,本人使用的是1.3.6版本，不支持IE8及以下版本。
二、引入必要的文件：
引入 jQuery 核心库，这里采用的是 2.0
<script type="text/javascript" src="easyui/jquery.min.js"></script>
引入 jQuery EasyUI 核心库，这里采用的是 1.3.6
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
引入 EasyUI 中文提示信息
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
引入自己开发的 JS 文件
<script type="text/javascript" src="js/index.js"></script>
引入 EasyUI 核心 UI 文件 CSS
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
引入 EasyUI 图标文件
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
三、加载UI组件的方式：
1、使用class方式加载
使用 class 加载，格式为：easyui-组件名
<div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">
内容部分
</div>
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px">
内容部分
</div>
</div>
</body>
</html>
PS：使用了规定的格式就可以生成一个 UI 组件，这是由于 jQuery EasyUI 的一个解析器（Parser）的起到了作用。解析之后，从 Firebug 里面可以看到
UI 组件变化后的HTML。
2、使用JS调用加载
$('#box').dialog();
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
// 使用js调用加载的方式
$(function(){
$("#box").dialog();
})
</script>
</head>
<body>
<div id="box" title="标题" style="width:400px;height:200px">
内容部分
</div>
</body>
</html>
PS：一般推荐使用第二种 JS 调用加载，因为一个 UI 组件有很多属性和方法，如果使用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则，
第二种提高了代码的可读性。
3、使用easyload.js智能加载
//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件
<script type="text/javascript" src="easyui/easyloader.js"></script>
//JS 代码
easyloader.load('dialog', function () {
$('#box').dialog();
});
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script>
//使用easyload.js智能加载（按需加载）
$(function(){
easyloader.load('dialog',function(){
$("#box").dialog();
})
})
</script>
</head>
<body>
<div id="box" title="标题" style="width:400px;height:200px">
内容部分
</div>
</body>
</html>parser，故名意思，就是解析器的意思，别看他只有那么几行代码，jQuery Easyui 能够根据class就能正常渲染页面全靠它了。一般情况下，我们并用不到解
析器，本文主要讨论一下，什么情况下会用到它，如何使用。
1、自动调用parser：
我们之所以在页面中，只要书写相应的class，Easyui就能成功渲染页面，这是因为解析器在默认情况下，会在文档装载完成的时候($(document).ready)被调用
一次，而且是渲染整个页面。
2、手动调用parper：
当页面DOM已经装载完毕，我们通过JavaScript代码再去创建class属性为easyui相应值的节点的时候，那么该节点不会被渲染，因为parser只是在页面装载完的
时候渲染一下整个页面，而不会一直监视着整个页面。所以需要我们手动调用parser去渲染。
parser示例：
<!DOCTYPE html>
<html>
<head>
<title>parserDemo</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script>
$(function(){
//为什么我们只用class属性的时候就能加载UI组件，因为页面在DOM装载完成后会自动执行一次$.parser.parse();
$.parser.onComplete=function (){
alert('DOM装载完毕,自动解析,完成');
}
})
function f (){
/**
在DOM加载之后手动指定class属性是不能够完成渲染的，因为parser只是在DOM装载完成
后解析一次，不会一直监视着DOM页面的变化的,所以下面还要显式调用$.parser.parse();
*/
$("#box").attr("class","easyui-dialog");
//$.parser.parse("#box"); 注意：这个是不好使的，因为parse()带参数的时候渲染的是JQ选择器指定元素的父类
$.parser.parse(("#p_box"));
//它还有个回调函数
$.parser.onComplete=function (){
alert('手动渲染解析完成');
}
}
</script>
</head>
<body>
<div id="p_box">
<div id="box" title="标题" style="width:400px;height:200px">
内容部分
</div>
</div>
<input type="button" value="手动渲染" οnclick="f()">
</body>
</html>