减小字体
增大字体- ·上一篇文章：jQuery EasyUI 表单 - 过滤下拉数据网格
- ·下一篇文章：Node.js 教程,node,Node.js,nodejs
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS02 → 文章内容
jQuery EasyUI 插件
pre {white-space:
pre-wrap;}jQuery EasyUI 插件jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。用户可以组合使用这些组件，也可以单独使用其中一个。插件列表Base（基础）Parser 解析器Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺寸Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提示框Layout（布局）Panel 面板Tabs 标签页/选项卡Accordion 折叠面板Layout 布局Menu（菜单）与 Button（按钮）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) }">
pre-wrap;}jQuery EasyUI 插件jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合，包括功能强大的 datagrid（数据网格）、treegrid（树形表格）、 panel（面板）、combo（下拉组合）等等。用户可以组合使用这些组件，也可以单独使用其中一个。插件列表Base（基础）Parser 解析器Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺寸Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提示框Layout（布局）Panel 面板Tabs 标签页/选项卡Accordion 折叠面板Layout 布局Menu（菜单）与 Button（按钮）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) }">
jQuery EasyUI 插件
