jQuery EasyUI 提供了用于建立跨浏覽器網頁的完整的元件集合,包括功能強大的 datagrid(資料網格)、treegrid(樹形表格)、 panel(面闆)、combo(下拉組合)等等。
使用者可以組合使用這些元件,也可以單獨使用其中一個。
Parser 解析器
Easyloader 加載器
Draggable 可拖動
Droppable 可放置
Resizable 可調整尺寸
Pagination 分頁
Searchbox 搜尋框
Progressbar 進度條
Tooltip 提示框
Panel 面闆
Tabs 标簽頁/頁籤
Accordion 折疊面闆
Layout 布局
Menu 菜單
Linkbutton 連結按鈕
Menubutton 菜單按鈕
Splitbutton 分割按鈕
Form 表單
Validatebox 驗證框
Combo 組合
Combobox 組合框
Combotree 組合樹
Combogrid 組合網格
Numberbox 數字框
Datebox 日期框
Datetimebox 日期時間框
Calendar 月曆
Spinner 微調器
Numberspinner 數值微調器
Timespinner 時間微調器
Slider 滑塊
Window 視窗
Dialog 對話框
Messager 消息框
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' 的方法,代碼如下:
現在您可以調用 'mymove' 方法來移動對話框(dialog)到指定的位置:
下載下傳庫,并在您的頁面中引用 EasyUI CSS 和 JavaScript 檔案。
一旦您引用了 EasyUI 必要的檔案,您就可以通過标記或者使用 JavaScript 來定義一個 EasyUI 元件。比如,要頂一個帶有可折疊功能的面闆,您需要編寫如下 HTML 代碼:
當通過标記建立元件,'data-options' 屬性被用來支援自版本 1.3 以來 HTML5 相容的屬性名稱。是以您可以如下重寫上面的代碼:
下面的代碼示範了如何建立一個綁定 'onSelect' 事件的組合框。