一.引入必要的文件
//引入 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 组件的方式加载 UI 组件有两种方式:1.使用 class 方式加载;2.使用 JS 调用加载。
//使用 class 加载,格式为:easyui-组件名
<div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">内容部分</div>
PS:使用了规定的格式就可以生成一个 UI 组件,这是由于 jQuery EasyUI 的一个解析器(Parser)的起到了作用。解析之后,从 Firebug 里面可以看到 UI 组件变化后的 HTML。
//使用 JS 调用加载
$('#box').dialog();
PS:一般推荐使用第二种 JS 调用加载,因为一个 UI 组件有很多属性和方法,如果使用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则,第二种提高了代码的可读性。
三.使用 easyload.js 智能加载
//删除 jQuery EasyUI 的 JS 核心文件及 CSS,引入 easyloader.js 文件 <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/easyloader.js"></script>
//JS 代码
easyloader.load('dialog', function () { $('#box').dialog();
});
PS:使用 easyloader 智能加载,是根据你使用的 UI 组件按需加载。我们可以通过 Firebug 查看 HTML,发现加载了非常多的 js 文件,这些 js 都是 dialog 组件的必须条件。所以,使用 easyloader 加载会减少不必要的内容加载。但问题是,使用智能加载,你编码的难度和成本都提高了,效率降低,并且智能加载的 js 文件数量还是非常多的,并不会提高太大的速度,反而因为 js 文件较多,被搜索引擎要求合并优化。
四.Parser 解析器
Parser 解析器是专门解析渲染各种 UI 组件了,一般来说,我们并不需要使用它即可自动完成 UI 组件的解析工作。当然,有时可能在某些环境下需要手动解析的情况。
|
|
|
|
| Parser 属性 |
| ||
|
|
|
|
|
|
|
|
|
| 属性名 |
| 默认值 |
|
|
| 说明 | |
|
|
|
|
|
|
|
| |
| $.parser.auto |
| true |
| 定义是否自动解析 EasyUI 组件 |
//关闭自动解析功能,放在$(function() {})外 | ||||||||
$.parser.auto = false; |
|
|
|
| ||||
|
|
|
|
| Parser 方法 |
| ||
|
|
|
|
|
|
| ||
| 属性名 |
|
| 传参 |
| 说明 | ||
|
|
|
|
|
| |||
| $.parser.parse |
| 空或 JQ 选择器 |
| 解析指定的 UI 组件 | |||
|
|
|
|
|
| |||
| $.parser.onComplete |
| 回调函数 |
| 解析完毕后执行 | |||
|
|
|
|
|
|
|
|