# 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) }"> ```