jQuery EasyUI 插件


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

插件列表

Base（基础）

Layout（布局）

Menu（菜单）与 Button（按钮）

Form（表单）

Window（窗口）

DataGrid（数据网格）与 Tree（树）

插件

easyui 的每个组件都有属性、方法和事件。用户可以很容易地对这些组件进行扩展。

属性

属性是定义在 jQuery.fn.{plugin}.defaults。比如，dialog 的属性是定义在 jQuery.fn.dialog.defaults。

事件

事件（回调函数）也是定义在 jQuery.fn.{plugin}.defaults。

方法

调用方法的语法：$(''selector'').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);
		});
    }
});

w︻3︻x︻u︻e.com提供本在线速查手册，请勿盗用！

现在您可以调用 ''mymove'' 方法来移动对话框（dialog）到指定的位置：

$(''#dd'').dialog(''mymove'', {
    left: 200,
    top: 100
});

w︻3︻x︻u︻e.com提供本在线速查手册，请勿盗用！

开始使用 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>

w︻3︻x︻u︻e.com提供本在线速查手册，请勿盗用！

一旦您引用了 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>

w︻3︻x︻u︻e.com提供本在线速查手册，请勿盗用！

当通过标记创建组件，''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>

w︻3︻x︻u︻e.com提供本在线速查手册，请勿盗用！

下面的代码演示了如何创建一个绑定 ''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)
    }">

w︻3︻x︻u︻e.com提供本在线速查手册，请勿盗用！