使用 JQuery EasyUI

學習要點：
     1.引入必要的文件
     2.加載 UI 組件的方式
     3.使用 easyload.js 智能加載
     4.Parser 解析器

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

注意：全部的代碼將在文章的最後頁統一引入

一． 引入必要的文件

因爲剛剛更新了 jQuery EasyUI1.4.4，這個小微版本的更新主要是內部優化和 UI 的一些微調，自己不影響學習。以前咱們採用 1.2.4 版本的中文手冊學習 1.3.5 都沒有什麼
障礙，因此，沒必要擔憂版本問題。

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

easyui文件夾是保存JQuery EasyUI的全部要使用的文件

JS文件夾是保存咱們本身的JS文件的

index.html是保存咱們本身書寫的html代碼

 1 //引入 jQuery 核心庫，這裏採用的是 2.0
 2 <script type="text/javascript" src="easyui/jquery.min.js"></script>
 3 //引入 jQuery EasyUI 核心庫，這裏採用的是 1.4.4
 4 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 5 //引入 EasyUI 中文提示信息
 6 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
 7 //引入本身開發的 JS 文件
 8 <script type="text/javascript" src="js/index.js"></script>
 9 //引入 EasyUI 核心 UI 文件 CSS
10 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
11 //引入 EasyUI 圖標文件
12 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

PS：引入完畢後，咱們就能夠編寫 jQuery EasyUI 代碼了。

2、加載 UI  組件的方式

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

1 //使用 class 加載，格式爲：easyui-組件名
2 <div class="easyui-dialog" id="box" title="標題" style="width:400px;height:200px;">
3 內容部分
4 </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 文件較多，被搜索引擎要求合併優化。

4、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 組件解析完畢！');
};