装修预算超支怎么办？2026控制成本的6个有效方法
2026/6/26 3:39:49
jQuery EasyUI 菜单与按钮 - 创建菜单按钮（Menu Button）
jQuery EasyUI的menubutton组件是一个结合了linkbutton和menu的下拉菜单按钮。点击或鼠标悬停在按钮上时，会自动显示关联的下拉菜单。它常用于工具栏、导航栏等场景，提供更紧凑的操作方式。
menubutton默认在点击按钮时显示菜单，支持图标、纯文本、禁用等 linkbutton 的所有特性。
官方参考：
- 教程：https://www.jeasyui.com/tutorial/mb/menubutton.php
- 文档：https://www.jeasyui.com/documentation/menubutton.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=MenuButton
步骤 1: 引入 EasyUI 资源
<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建菜单按钮（最简单方式）
直接在<a>标签上添加class="easyui-menubutton"，并通过menu属性指定关联的菜单 ID。
<!-- 菜单按钮 --><ahref="javascript:void(0)"class="easyui-menubutton"data-options="menu:'#mm1',iconCls:'icon-edit'">编辑</a><ahref="javascript:void(0)"class="easyui-menubutton"data-options="menu:'#mm2',iconCls:'icon-help',plain:false">帮助</a><!-- 关联的菜单1 --><divid="mm1"class="easyui-menu"style="width:120px;"><divdata-options="iconCls:'icon-undo'">撤销</div><divdata-options="iconCls:'icon-redo'">重做</div><divclass="menu-sep"></div><divdata-options="iconCls:'icon-cut'">剪切</div><divdata-options="iconCls:'icon-copy'">复制</div><divdata-options="iconCls:'icon-paste'">粘贴</div></div><!-- 关联的菜单2 --><divid="mm2"class="easyui-menu"style="width:150px;"><div>项目1</div><div>项目2</div><divclass="menu-sep"></div><div><span>子菜单</span><div><div>子项1</div><div>子项2</div></div></div></div>步骤 3: 工具栏风格（plain 属性）
常用于 datagrid 或 panel 的 toolbar。
<divstyle="padding:10px;background:#fafafa;"><ahref="javascript:void(0)"class="easyui-menubutton"data-options="menu:'#mm3',plain:true,iconCls:'icon-save'">保存</a><ahref="javascript:void(0)"class="easyui-menubutton"data-options="menu:'#mm4',plain:true,iconCls:'icon-print'">打印</a></div>步骤 4: 处理菜单点击事件
<scripttype="text/javascript">$(function(){// 为菜单添加点击事件（推荐绑定到菜单本身）$('#mm1').menu({onClick:function(item){$.messager.alert('提示','您点击了：'+item.text);// 这里可以执行具体操作，如新增、删除等}});});</script>步骤 5: 完整示例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI Menu Button 示例</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><h2>jQuery EasyUI 菜单按钮（Menu Button）示例</h2><p>标准菜单按钮：</p><ahref="javascript:void(0)"id="mb-edit"class="easyui-menubutton"data-options="menu:'#mm-edit',iconCls:'icon-edit'">编辑</a><divid="mm-edit"class="easyui-menu"style="width:150px;"><divdata-options="iconCls:'icon-cut'">剪切</div><divdata-options="iconCls:'icon-copy'">复制</div><divdata-options="iconCls:'icon-paste'">粘贴</div><divclass="menu-sep"></div><divdata-options="iconCls:'icon-remove'">删除</div></div><p>工具栏风格：</p><divstyle="padding:10px;background:#eee;"><ahref="#"class="easyui-menubutton"data-options="menu:'#mm-file',plain:true">文件</a><ahref="#"class="easyui-menubutton"data-options="menu:'#mm-help',plain:true,iconCls:'icon-help'">帮助</a></div><divid="mm-file"class="easyui-menu"><div>新建</div><div>打开</div><div>保存</div></div><divid="mm-help"class="easyui-menu"><div>关于</div></div><script>$(function(){$('#mm-edit').menu({onClick:function(item){$.messager.alert('操作','执行：'+item.text);}});});</script></body></html>关键说明
- 创建方式：只需指定
menu:'#menuId'，无需额外 JavaScript 初始化。 - 常用属性：
menu：关联菜单的 ID（必填）。duration：菜单显示/隐藏动画时长。plain:true：简洁模式（适合工具栏）。- 支持所有 linkbutton 属性（如
iconCls、disabled）。
- 事件：推荐在 menu 上绑定
onClick，而非 menubutton。 - 优势：无需手动 show/hide 菜单，自动处理下拉。
扩展
- splitbutton：类似 menubutton，但按钮主体可点击执行默认操作，下拉箭头显示菜单（下一个常见组件）。
- 与 datagrid toolbar 结合：非常适合 CRUD 操作按钮。
更多示例：
- 官方创建菜单按钮：https://www.jeasyui.com/tutorial/mb/menubutton.php
- 键盘导航：https://www.jeasyui.com/easyui/demo/menubutton/nav.html
如果需要 splitbutton（分裂按钮）、动态菜单、或与 datagrid 集成示例，请继续提问！