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

EasyUI 簡介

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

easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。

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

easyui是個完美支持HTML5網頁的完整框架。

easyui節省您網頁開發的時間和規模。

easyui很簡單但功能強大的。

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

注意：所有的代碼將在文章的最后頁統一引入

一． 引入必要的文件

由于剛剛更新了 jQuery EasyUI1.4.4，這個小微版本的更新主要是內部優化和 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>//引入自己開發的 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：使用了規定的格式就可以生成一個 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 組件的解析工作。當然，有時可能在某些環境下需要手動解析的情況。
手動解析一般是使用 class 的情況下有效，比如設置 class="easyui-dialog"。

Parser 屬性

屬性名 默認值 說明

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

Parser 方法

屬性名 傳參 說明

$.parser.parse 空或 JQ 選擇器 解析指定的 UI 組件$.parser.onComplete 回調函數 解析完畢后執行//解析所有 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 組件解析完畢后執行，放在$(function () {})外$.parser.onComplete = function () {alert('UI 組件解析完畢！');};

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