jQuery EasyUI 是一個(gè)基于 jQuery 的框架，集成了各種用戶(hù)界面插件。

EasyUI 簡(jiǎn)介

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

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

使用easyui你不需要寫(xiě)很多代碼，你只需要通過(guò)編寫(xiě)一些簡(jiǎn)單HTML標(biāo)記，就可以定義用戶(hù)界面。

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

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

easyui很簡(jiǎn)單但功能強(qiáng)大的。

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

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

一． 引入必要的文件

由于剛剛更新了 jQuery EasyUI1.4.4，這個(gè)小微版本的更新主要是內(nèi)部?jī)?yōu)化和 UI 的一些微調(diào)，本身不影響學(xué)習(xí)。之前我們采用 1.2.4 版本的中文手冊(cè)學(xué)習(xí) 1.3.5 都沒(méi)有什么障礙，所以，不必?fù)?dān)心版本問(wèn)題。

我們?cè)谡麄€(gè)文章中JQuery EasyUI的目錄結(jié)構(gòu)都如下圖所示

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

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

index.html是保存我們自己書(shū)寫(xiě)的html代碼

//引入 jQuery 核心庫(kù)，這里采用的是 .<script type="text/javascript" src="easyui/jquery.min.js"></script>//引入 jQuery EasyUI 核心庫(kù)，這里采用的是 ..<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>//引入自己開(kāi)發(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 圖標(biāo)文件<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

PS：引入完畢后，我們就可以編寫(xiě) jQuery EasyUI 代碼了。

二、加載 UI 組件的方式

加載 UI 組件有兩種方式：1.使用 class 方式加載；2.使用 JS 調(diào)用加載。

//使用 class 加載，格式為：easyui-組件名<div class="easyui-dialog" id="box" title="標(biāo)題" style="width:px;height:px;">內(nèi)容部分</div>

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

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

PS：一般推薦使用第二種 JS 調(diào)用加載，因?yàn)橐粋€(gè) 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 組件按需加載。我們可以通過(guò)Firebug 查看 HTML， 發(fā)現(xiàn)加載了非常多的 js 文件， 這些 js 都是 dialog 組件的必須條件。所以，使用 easyloader 加載會(huì)減少不必要的內(nèi)容加載。但問(wèn)題是，使用智能加載，你編碼的難度和成本都提高了，效率降低，并且智能加載的 js 文件數(shù)量還是非常多的，并不會(huì)提高太大的速度，反而因?yàn)?js 文件較多，被搜索引擎要求合并優(yōu)化。

四、Parser 解析器

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

Parser 屬性

屬性名 默認(rèn)值 說(shuō)明

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

Parser 方法

屬性名 傳參 說(shuō)明

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

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

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

以上內(nèi)容給大家介紹了JQuery EasyUI的使用，希望對(duì)大家有所幫助！