jQuery EasyUI 菜单与按钮 - 创建菜单按钮（Menu Button）-程序员充电站

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 菜单，自动处理下拉。