jQuery EasyUI 插件

jQuery EasyUI提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等，这些组件能够组合使用，也可以单独使用。

插件列表

Base（基础）

Parser 解析器
Easyloader 加载器
Draggable 可拖动
Droppable 可放置
Resizable 可调整尺寸
Pagination 分页
Searchbox 搜索框
Progressbar 进度条
Tooltip 提示框

Layout（布局）

Panel 面板
Tabs 标签页/选项卡
Accordion 折叠面板
Layout 布局

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

插件