EasyUI简单使用介绍

下载Jquery easyui包，并解压：

一．引入必要的文件

//引入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" />

PS：引入完毕后，我们就可以编写jQuery EasyUI 代码了。

二．加载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 文件较多，被搜索引擎要求合并优化。