天天看點

jQuery EasyUI 插件

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' 事件的組合框。