JQuery EasyUI的使用_jquery

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的使用，希望對大家有幫助！