EasyUI jQuery 菜单和按钮小部件完整参考

EasyUI 是一个基于 jQuery 的 UI 库，提供了丰富的 UI 组件和插件，包括菜单和按钮小部件。本文将介绍 EasyUI jQuery 菜单和按钮小部件的完整参考。

菜单组件

基本用法

$(selector).menu(options);

menu 函数用于创建菜单组件，参数 selector 是菜单容器的选择器，参数 options 是配置选项。以下是一个简单的菜单组件示例：

<div id="menu" class="easyui-menu" style="width:120px;">
  <div data-options="iconCls:'icon-add'">Add</div>
  <div data-options="iconCls:'icon-remove'">Remove</div>
</div>

$('#menu').menu();

选项说明

以下是菜单组件的常用选项：

• alignTo：将菜单对齐到指定元素，默认为 null。
• align：指定菜单对齐方式，默认为 'left'。
• minWidth：指定菜单最小宽度，默认为 120。
• zIndex：指定菜单的 Z 轴顺序，默认为 110000。
• hideOnUnhover：鼠标移开时是否自动隐藏菜单，默认为 true。
• duration：菜单展开/收起的动画时长（毫秒），默认为 100。

事件说明

以下是菜单组件的常用事件：

• onShow：菜单显示时触发。
• onHide：菜单隐藏时触发。
• onClick：菜单项被点击时触发。

按钮组件

基本用法

$(selector).linkbutton(options);

linkbutton 函数用于创建按钮组件，参数 selector 是按钮容器的选择器，参数 options 是配置选项。以下是一个简单的按钮组件示例：

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">Add</a>

$('.easyui-linkbutton').linkbutton();

选项说明

以下是按钮组件的常用选项：

• iconCls：指定按钮的图标样式。
• plain：是否显示为普通按钮（不带背景色），默认为 false。
• size：指定按钮的大小，可选值 'small'、'large'，默认为 ''。

方法说明

以下是按钮组件的常用方法：

• enable：启用按钮。
• disable：禁用按钮。
• toggle：切换按钮的选中状态。

事件说明

以下是按钮组件的常用事件：

• onClick：按钮被点击时触发。
• onSelect：按钮被选中时触发。
• onUnselect：按钮被取消选中时触发。

总结

EasyUI jQuery 菜单和按钮小部件是常用的 Web UI 组件，可以帮助开发者快速创建菜单和按钮功能。本文介绍了常用的选项、事件和方法，供开发者参考使用。