jQuery EasyUI 提供了用于創(chuàng)建跨瀏覽器網(wǎng)頁(yè)的完整的組件集合，包括功能強(qiáng)大的 datagrid（數(shù)據(jù)網(wǎng)格）、treegrid（樹(shù)形表格）、 panel（面板）、combo（下拉組合）等等。 用戶(hù)可以組合使用這些組件，也可以單獨(dú)使用其中一個(gè)。

插件列表

Base（基礎(chǔ)）

• Parser 解析器

• Easyloader 加載器

• Draggable 可拖動(dòng)

• Droppable 可放置

• Resizable 可調(diào)整尺寸

• Pagination 分頁(yè)

• Searchbox 搜索框

• Progressbar 進(jìn)度條

• Tooltip 提示框

Layout（布局）

• Panel 面板

• Tabs 標(biāo)簽頁(yè)/選項(xiàng)卡

• Accordion 折疊面板

• Layout 布局

Menu（菜單）與 Button（按鈕）

• Menu 菜單

• Linkbutton 鏈接按鈕

• Menubutton 菜單按鈕

• Splitbutton 分割按鈕

Form（表單）

• Form 表單

• Validatebox 驗(yàn)證框

• Combo 組合

• Combobox 組合框

• Combotree 組合樹(shù)

• Combogrid 組合網(wǎng)格

• Numberbox 數(shù)字框

• Datebox 日期框

• Datetimebox 日期時(shí)間框

• Calendar 日歷

• Spinner 微調(diào)器

• Numberspinner 數(shù)值微調(diào)器

• Timespinner 時(shí)間微調(diào)器

• Slider 滑塊

Window（窗口）

• Window 窗口

• Dialog 對(duì)話(huà)框

• Messager 消息框

DataGrid（數(shù)據(jù)網(wǎng)格）與 Tree（樹(shù)）

• Datagrid 數(shù)據(jù)網(wǎng)格

• Propertygrid 屬性網(wǎng)格

• Tree 樹(shù)

• Treegrid 樹(shù)形網(wǎng)格

插件

easyui 的每個(gè)組件都有屬性、方法和事件。用戶(hù)可以很容易地對(duì)這些組件進(jìn)行擴(kuò)展。

屬性

屬性是定義在 jQuery.fn.{plugin}.defaults。比如，dialog 的屬性是定義在 jQuery.fn.dialog.defaults。

事件

事件（回調(diào)函數(shù)）也是定義在 jQuery.fn.{plugin}.defaults。

方法

調(diào)用方法的語(yǔ)法：$('selector').plugin('method', parameter);

其中：

• selector 是 jquery 對(duì)象選擇器。

• plugin 是插件名稱(chēng)。

• method 是與插件相匹配的已存在方法。

• parameter 是參數(shù)對(duì)象，可以是對(duì)象、字符串...

方法是定義在 jQuery.fn.{plugin}.methods。每個(gè)方法有兩個(gè)參數(shù)：jq 和 param。第一個(gè)參數(shù) 'jq' 是必需的，引用 jQuery 對(duì)象。第二個(gè)參數(shù) 'param' 引用方法傳遞的實(shí)際參數(shù)。比如，要擴(kuò)展 dialog 組件的方法名為 'mymove' 的方法，代碼如下：

$.extend($.fn.dialog.methods, {
    mymove: function(jq, newposition){
		return jq.each(function(){
			$(this).dialog('move', newposition);
		});
    }
});

現(xiàn)在您可以調(diào)用 'mymove' 方法來(lái)移動(dòng)對(duì)話(huà)框（dialog）到指定的位置：

$('#dd').dialog('mymove', {
    left: 200,
    top: 100
});

開(kāi)始使用 jQuery EasyUI

下載庫(kù)，并在您的頁(yè)面中引用 EasyUI CSS 和 JavaScript 文件。

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

一旦您引用了 EasyUI 必要的文件，您就可以通過(guò)標(biāo)記或者使用 JavaScript 來(lái)定義一個(gè) EasyUI 組件。比如，要頂一個(gè)帶有可折疊功能的面板，您需要編寫(xiě)如下 HTML 代碼：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" iconCls="icon-save" collapsible="true">
    The panel content
</div>

當(dāng)通過(guò)標(biāo)記創(chuàng)建組件，'data-options' 屬性被用來(lái)支持自版本 1.3 以來(lái) HTML5 兼容的屬性名稱(chēng)。所以您可以如下重寫(xiě)上面的代碼：

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
    title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
    The panel content
</div>

下面的代碼演示了如何創(chuàng)建一個(gè)綁定 'onSelect' 事件的組合框。

<input class="easyui-combobox" name="language"
    data-options="
    url:'combobox_data.json',
    valueField:'id',
    textField:'text',
    panelHeight:'auto',
    onSelect:function(record){
    alert(record.text)
    }">