jQuery EasyUI 插件


jQuery EasyUI 提供了用於建立跨瀏覽器網頁的完整的元件集合，包括功能強大的datagrid（資料網格）、treegrid（樹形表格）、 panel（圖）、combo（下拉組合）等等。 使用者可以組合使用這些組件，也可以單獨使用其中一個。

外掛程式清單

Base（基礎）

  • #Parser 解析器

  • Easyloader 載入器

  • Draggable 可拖曳

  • Droppable 可放置

  • Resizable 可調整尺寸

  • Pagination 分頁

  • Searchbox 搜尋框

  • Progressbar 進度條

  • #Tooltip 提示方塊

Layout（版面）

  • #Panel 面板

  • Tabs 標籤頁/選項卡

  • Accordion 折疊面板

  • #Layout 佈局

##Menu（選單）與Button（按鈕）

  • Menu 選單

  • Linkbutton 連結按鈕

  • Menubutton 選單按鈕

  • Splitbutton 分割按鈕

Form（表單）

  • Form 表單

  • Validatebox 驗證方塊

  • Combo 組合

  • Combobox 組合方塊

  • Combotree 組合樹

  • Combogrid 組合網格

  • #Numberbox 數字方塊

  • Datebox 日期方塊

  • Datetimebox 日期時間框

  • Calendar 日曆

  • Spinner 微調器

  • #Numberspinner 數值微調器

  • Timespinner 時間微調器

  • Slider 滑桿

Window（視窗）

  • Window 視窗

  • Dialog 對話方塊

  • ##Messager 訊息方塊

  • DataGrid（資料網格）與Tree（樹）

#Datagrid 資料網格

##Propertygrid屬性網格

Tree 樹​​

Treegrid 樹形網格

##外掛

easyui 的每個元件都有屬性、方法和事件。使用者可以輕鬆地對這些組件進行擴展。

    屬性

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

    • 事件

  • 事件（回呼函數）也是定義在 jQuery.fn.{plugin}.defaults。

    • 方法

  • 呼叫方法的語法：$('selector').plugin('method', parameter);

    • 其中：

  • ####selector 是jquery 物件選擇器。 ############plugin 是外掛名稱。 ############method 是與外掛程式相符的已存在方法。 ############parameter 是參數對象，可以是對象、字串...###

方法是定義在 jQuery.fn.{plugin}.methods。每個方法有兩個參數：jq 和 param。第一個參數 'jq' 是必需的，引用 jQuery 物件。第二個參數 'param' 引用方法傳遞的實際參數。例如，要擴充dialog 元件的方法名為'mymove' 的方法，程式碼如下：

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

現在您可以呼叫'mymove' 方法來移動對話框（dialog）到指定的位置：

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

開始使用jQuery EasyUI

下載庫，並在您的頁面中引用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 必要的文件，您就可以透過標記或使用 JavaScript 來定義一個 EasyUI 元件。例如，要頂一個有可折疊功能的面板，您需要寫如下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>

當透過標記建立元件，'data-options' 屬性被用來支援自版本1.3 以來HTML5 相容的屬性名稱。所以您可以如下重寫上面的程式碼：

<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>

下面的程式碼示範如何建立一個綁定 '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)
    }">