HTML里面插件easyui,jQuery EasyUI 插件
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);
其中：
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 文件。
一旦您引用了 EasyUI 必要的文件，您就可以通过标记或者使用 JavaScript 来定义一个 EasyUI 组件。比如，要顶一个带有可折叠功能的面板，您需要编写如下 HTML 代码：
title="My Panel" iconCls="icon-save" collapsible="true">
The panel content
当通过标记创建组件，'data-options' 属性被用来支持自版本 1.3 以来 HTML5 兼容的属性名称。所以您可以如下重写上面的代码：
title="My Panel" data-options="iconCls:'icon-save',collapsible:true">
The panel content
下面的代码演示了如何创建一个绑定 'onSelect' 事件的组合框。
data-options="
url:'combobox_data.json',
valueField:'id',
textField:'text',
panelHeight:'auto',
onSelect:function(record){
alert(record.text)
}">