jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件。

EasyUI 簡介

easyui是一種基于jQuery的用戶界面插件集合。

easyui為創(chuàng)建現(xiàn)代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui是個完美支持HTML5網(wǎng)頁的完整框架。

easyui節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模。

easyui很簡單但功能強大的。

本文重點了解 EasyUI 的兩種使用方法，包含不同的加載已經(jīng) easyload 智能按需加載。最后了解一下 Parser 解析器的用法。

注意：所有的代碼將在文章的最后頁統(tǒng)一引入

一． 引入必要的文件

由于剛剛更新了 jQuery EasyUI1.4.4，這個小微版本的更新主要是內部優(yōu)化和 UI 的一些微調，本身不影響學習。之前我們采用 1.2.4 版本的中文手冊學習 1.3.5 都沒有什么障礙，所以，不必擔心版本問題。

我們在整個文章中JQuery EasyUI的目錄結構都如下圖所示

easyui文件夾是保存JQuery EasyUI的所有要使用的文件

JS文件夾是保存我們自己的JS文件的

index.html是保存我們自己書寫的html代碼

//引入 jQuery 核心庫，這里采用的是 .
<script type="text/javascript" src="easyui/jquery.min.js"></script>
//引入 jQuery EasyUI 核心庫，這里采用的是 ..
<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>
//引入自己開發(fā)的 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:px;height:px;">
內容部分
</div>

PS：使用了規(guī)定的格式就可以生成一個 UI 組件，這是由于 jQuery EasyUI 的一個解析器（Parser）的起到了作用。解析之后，從 Firebug 里面可以看到 UI 組件變化后的 HTML。

//使用 JS 調用加載
$('#box').dialog();

PS：一般推薦使用第二種 JS 調用加載，因為一個 UI 組件有很多屬性和方法，如果使用 class 的用法將極大的不方便。并且根據(jù) 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 智能加載，是根據(jù)你使用的 UI 組件按需加載。我們可以通過Firebug 查看 HTML， 發(fā)現(xiàn)加載了非常多的 js 文件， 這些 js 都是 dialog 組件的必須條件。所以，使用 easyloader 加載會減少不必要的內容加載。但問題是，使用智能加載，你編碼的難度和成本都提高了，效率降低，并且智能加載的 js 文件數(shù)量還是非常多的，并不會提高太大的速度，反而因為 js 文件較多，被搜索引擎要求合并優(yōu)化。

四、Parser 解析器

Parser 解析器是專門解析渲染各種 UI 組件了，一般來說，我們并不需要使用它即可自動完成 UI 組件的解析工作。當然，有時可能在某些環(huán)境下需要手動解析的情況。
手動解析一般是使用 class 的情況下有效，比如設置 class="easyui-dialog"。

Parser 屬性

屬性名 默認值 說明

$.parser.auto true 定義是否自動解析 EasyUI 組件
//關閉自動解析功能，放在$(function() {})外
$.parser.auto = false;

Parser 方法

屬性名 傳參 說明

$.parser.parse 空或 JQ 選擇器 解析指定的 UI 組件
$.parser.onComplete 回調函數(shù) 解析完畢后執(zhí)行
//解析所有 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse('#box');

PS：使用指定 UI 解析，必須要設置父類容器才可以解析到。比如：

<div id="box">
<div class="easyui-dialog" title="標題" style="width:400px;height:200px;">
<span>內容部分</span>
</div>
</div>
//UI 組件解析完畢后執(zhí)行，放在$(function () {})外
$.parser.onComplete = function () {
alert('UI 組件解析完畢！');
};

以上內容給大家介紹了JQuery EasyUI的使用，希望對大家有所幫助！

最新評論