jQuery EasyUI 插件 · W3School jQuery UI 教程

# jQuery EasyUI 插件 jQuery EasyUI 提供了用于創建跨瀏覽器網頁的完整的組件集合，包括功能強大的 datagrid（數據網格）、treegrid（樹形表格）、 panel（面板）、combo（下拉組合）等等。用戶可以組合使用這些組件，也可以單獨使用其中一個。 ## 插件列表 ### Base（基礎） * [Parser 解析器](plugins-base-parser.html) * [Easyloader 加載器](plugins-base-easyloader.html) * [Draggable 可拖動](plugins-base-draggable.html) * [Droppable 可放置](plugins-base-droppable.html) * [Resizable 可調整尺寸](plugins-base-resizable.html) * [Pagination 分頁](plugins-base-pagination.html) * [Searchbox 搜索框](plugins-base-searchbox.html) * [Progressbar 進度條](plugins-base-progressbar.html) * [Tooltip 提示框](plugins-base-tooltip.html) ### Layout（布局） * [Panel 面板](plugins-layout-panel.html) * [Tabs 標簽頁/選項卡](plugins-layout-tabs.html) * [Accordion 折疊面板](plugins-layout-accordion.html) * [Layout 布局](plugins-layout-layout.html) ### Menu（菜單）與 Button（按鈕） * [Menu 菜單](plugins-mb-menu.html) [](plugins-mb-menu.html) * [](plugins-mb-menu.html)[Linkbutton 鏈接按鈕](plugins-mb-linkbutton.html) * [Menubutton 菜單按鈕](plugins-mb-menubutton.html) * [Splitbutton 分割按鈕](plugins-mb-splitbutton.html) ### Form（表單） * [Form 表單](plugins-form-form.html) * [Validatebox 驗證框](plugins-form-validatebox.html) * [Combo 組合](plugins-form-combo.html) * [Combobox 組合框](plugins-form-combobox.html) * [Combotree 組合樹](plugins-form-combotree.html) * [Combogrid 組合網格](plugins-form-combogrid.html) * [Numberbox 數字框](plugins-form-numberbox.html) * [Datebox 日期框](plugins-form-datebox.html) * [Datetimebox 日期時間框](plugins-form-datetimebox.html) * [Calendar 日歷](plugins-form-calendar.html) * [Spinner 微調器](plugins-form-spinner.html) * [Numberspinner 數值微調器](plugins-form-numberspinner.html) * [Timespinner 時間微調器](plugins-form-timespinner.html) * [Slider 滑塊](plugins-form-slider.html) ### Window（窗口） * [Window 窗口](plugins-window-window.html) * [Dialog 對話框](plugins-window-dialog.html) * [Messager 消息框](plugins-window-messager.html) ### DataGrid（數據網格）與 Tree（樹） * [Datagrid 數據網格](plugins-dt-datagrid.html) * [Propertygrid 屬性網格](plugins-dt-propertygrid.html) * [Tree 樹](plugins-dt-tree.html) * [Treegrid 樹形網格](plugins-dt-treegrid.html) ## 插件 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) }"> ```