EasyUI学习-如何使用jQuery EasyUI？
1、 使用步骤
① 在项目的WebRoot目录下创建js文件夹，导入easy-ui的js包；
② 在HTML页面引入easy ui 的js文件；
③ 编写相应的HTML代码与JS代码。
2 、引入EasyUI的js文件的方式（方式一）
一次性导入所有相关js文件：(建议使用这种方式)
1） 引用jQuery的jquery.js文件（拖拽放入即可）
<scripttype="text/javascript"src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
2） 引用Easy UI的easyui.js文件
<scripttype="text/javascript"src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
3） 导入Easy UI的主题样式easyui.css文件(themes目录中，这个文件中包含了所有组件的样式文件，也可导入使用到的组件的css文件，但建议使用这个)
<linkrel="stylesheet"href="js/jquery-easyui-1.2.6/themes/default/easyui.css"type="text/css"></link>
4） 导入Easy UI的图标样式icon.css文件(若我们要自己添加一些图标可以在其中添加，但是，最好是自己另外写一个css)
<linkrel="stylesheet"href="js/jquery-easyui-1.2.6/themes/icon.css"type="text/css"></link>
5） 引用Easy UI的国际化文件(locale目录中，如easyui-lang-zh_CN.js),以下为让它显示中文
<scripttype="text/javascript"src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
3 、EasyUI之HelloWord
3.1 乱码问题
在页面中引入EasyUI相关文件后，通过火狐-firebug（HTML面板中）查看引入的文件，若文件出现乱码问题，则在页面中加入编码设置，如下：
<metahttp-equiv="content-type"content="text/html; charset=UTF-8">
（或者同时在<script>标签中加入属性charset=”utf-8” ）
乱码问题通常解决方法：使页面编码、JavaScript编码、项目编码、（tomcat编码、数据库编码等）保持一致。
3.2 EasyUI两种创建（渲染）组件的方式
示例一：弹出dialog对话框
l 方式一：纯HTML的方式，如下图，在HTML元素中（如div）中加入class=”easyui-dialog”属性。
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;">Dialog</div>
EasyUI的规则
EasyUI的规则是：easyui-dialog即以easyui-开头，再加上组件名称，其就会自动将div变成相应的组件模式。
组件中的相关属性位于EasyUI API中的相关插件中：
下图为dialog中的相关属性，这些属性可以写在DOM节点中，也可以使用js动态添加。
为什么只添加class属性就能自动将div变成想要的结果呢？
参上图（All Plugins）：因为在EasyUI的插件的Base中有个Parser功能，它可以将我们所写的包含class属性值为”easyui-”开头的元素解析成了相应的组件。
（可以通过firebug查看解析后的元素的变化。可以发现其已经不是原来简单的div了，而变的比较复杂了）
l 方式二：通过js的方式渲染（即创建）出相应的组件。
先写div，在使用（js）jQuery找到对应的div。代码如下：
<script type="text/javascript">
$(function()){ //匿名的function
$(‘#dd’).dialog(); //无参的情况
}
</script>
问题：这里的dialog()是从哪里来的？
通过查看API，如下图，我们可以从Dialog组件的Usage中看到其提供的相应使用方法（注：该方法在Dialog的Methods中可以找到），即只需这样写，EasyUI会自动帮我们解析。
示例二：弹出模式dialog对话框
将该dialog改变成模式化的对话框。这时我们发现其属性中并没有modal（模式化）的属性，但是我们可以看到在“Dependencies”中，其是继承自window的，因此可以在window的查找相关属性。
注意：在window中modal属性默认是true的，但是在dialog中其默认值已被覆写为false。
代码如下：
<script type="text/javascript">
$(function()){ //匿名的function
$(‘#dd’).dialog({
modal:true
}); //注意这里的写法
}
</script>
jQuery语法及firebug调试技巧补充
$(function()){ //匿名的function
…. //页面所有DOM节点加载完之后才执行的代码
//区别于body onload事件，onload事件是在页面所有内容加（包括DOM节点和其中的图片等内容）载完毕之后才会执行的
console.info($(‘#dd’)) //console是用来调试用的，这样可以在firebug控制台看到所定位的具体是什么对象。
//alert()方式只能提示只能提示是Object对象。
}
4 、使用EasyLoader的方式引入EasyUI的js文件（方式二）
使用这种方式我们可以只引入需要的组件对应的easyui.js文件。
这时我们在页面中需引入的文件如下：
1） 引用jQuery的jquery.js文件（拖拽放入即可）
<scripttype="text/javascript"src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
2） 引用Easy UI的easyloader.js文件
<scripttype="text/javascript"src="js/jquery-easyui-1.2.6/easyloader.js"></script>
即这时我们只需要引入除jQuery.js文件以外的easyloader.js文件即可，其它文件不需要再引入。这种方式可以适当的减少页面的代码量，在一定程度上加快页面的加载速度。
4.1 使用easyloader的方式创建组件
示例三：使用easyloader的方式创建dialog对话框
注意：easyloader.load()方法的第一个参数是需要创建的组件，第二个参数是一个回调函数，创建组件的js代码需在该回调函数中写。
4.2 使用easyloader方式时程序的加载顺序—通过firebug查看
从图中我们可以看到，使用esayloader.load()方法创建dialog时，EasyUI首先到其plugins目录中加载parser.js文件，然后是依次加载dialog组件继承的组件，最后才加载dialog组件。
示例四：使用easyloader的方式加载多个组件
注意，这个时候我们要在easyloader.load()方法的第一个参数写要加载模块（组件）的数组，
格式为：[‘dialog’, ‘messager’]，即中括号表示。
4.3 EasyLoader的更多功能
① 使用引入easyloader.js的方式也可以直接使用class属性的方法创建组件。
② easyloader.loader()方法的一个简化方法是：using(………)，即使用using来替代easyloader.loader。
③ easyloader还可以来动态的引入js、css文件来完成一些事情。使用方法即将load()方法第一个参数改为需要引入的文件的路径即可。