在 jQuery EasyUI 中，菜单按钮（Menu Button）将普通按钮与下拉菜单结合，点击或悬停即可展开操作选项。本文通过 HTML 标记与属性配置演示其创建方法，无需额外 JavaScript 即可实现联动效果，并提供关键参数说明与完整示例，便于快速集成到项目中。
菜单按钮的组成与工作原理
菜单按钮（Menu Button）由链接按钮（Link Button）和菜单（Menu）两部分组成。当用户点击按钮或将鼠标悬停在按钮上时，系统会自动显示关联的下拉菜单。该组件基于 EasyUI 的声明式初始化机制，仅需在 HTML 中正确绑定菜单 ID，即可自动完成事件监听与渲染，无需手动编写 JavaScript 代码。
HTML 标记实现步骤
创建菜单按钮的核心是定义一个带有 easyui-menubutton 类的链接按钮，并通过 menu 属性指向对应的菜单容器。以下为完整实现示例：
Undo
Redo
Cut
Copy
Paste
Delete
Select All
Help
Update
About
上述代码中，外层 用于包裹按钮并提供基础样式；两个 标签分别绑定 #mm1 和 #mm2 菜单；菜单项通过 定义，menu-sep 类用于插入分隔线。
关键配置属性说明
菜单按钮的行为由以下核心属性控制：
menu：指定关联菜单的 jQuery 选择器（如#mm1），必须与目标菜单容器的id一致。iconCls：设置按钮左侧显示的图标样式类，如icon-edit、icon-help等，依赖 EasyUI 内置图标库。href：按钮链接地址，通常设为#以避免页面跳转。
菜单项同样支持 iconCls 属性，用于在选项前添加图标；menu-sep 类用于在菜单中插入视觉分隔线，提升选项分组可读性。
使用注意事项
- 确保页面已正确引入 jQuery 和 EasyUI 的核心 CSS/JS 文件，否则组件无法自动初始化。
- 菜单容器必须设置明确的
id，且menu属性值需以#开头匹配该 ID。 - 若需动态修改菜单内容或绑定点击事件，可通过 JavaScript 调用 EasyUI 提供的 API 进行扩展，但基础展示功能无需额外脚本。
- 按钮与菜单的宽度可通过内联样式或外部 CSS 控制，建议为菜单容器设置固定宽度以避免布局偏移。
