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 资源
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建菜单按钮（最简单方式）
直接在 <a> 标签上添加 class="easyui-menubutton"，并通过 menu 属性指定关联的菜单 ID。
<!-- 菜单按钮 -->
<a href="javascript:void(0)" class="easyui-menubutton"
data-options="menu:'#mm1',iconCls:'icon-edit'">编辑</a>
<a href="javascript:void(0)" class="easyui-menubutton"
data-options="menu:'#mm2',iconCls:'icon-help',plain:false">帮助</a>
<!-- 关联的菜单1 -->
<div id="mm1" class="easyui-menu" style="width:120px;">
<div data-options="iconCls:'icon-undo'">撤销</div>
<div data-options="iconCls:'icon-redo'">重做</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-cut'">剪切</div>
<div data-options="iconCls:'icon-copy'">复制</div>
<div data-options="iconCls:'icon-paste'">粘贴</div>
</div>
<!-- 关联的菜单2 -->
<div id="mm2" class="easyui-menu" style="width:150px;">
<div>项目1</div>
<div>项目2</div>
<div class="menu-sep"></div>
<div>
<span>子菜单</span>
<div>
<div>子项1</div>
<div>子项2</div>
</div>
</div>
</div>步骤 3: 工具栏风格（plain 属性）
常用于 datagrid 或 panel 的 toolbar。
<div style="padding:10px;background:#fafafa;">
<a href="javascript:void(0)" class="easyui-menubutton"
data-options="menu:'#mm3',plain:true,iconCls:'icon-save'">保存</a>
<a href="javascript:void(0)" class="easyui-menubutton"
data-options="menu:'#mm4',plain:true,iconCls:'icon-print'">打印</a>
</div>步骤 4: 处理菜单点击事件
<script type="text/javascript">
$(function(){
// 为菜单添加点击事件（推荐绑定到菜单本身）
$('#mm1').menu({
onClick: function(item){
$.messager.alert('提示', '您点击了：' + item.text);
// 这里可以执行具体操作，如新增、删除等
}
});
});
</script>步骤 5: 完整示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Menu Button 示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>jQuery EasyUI 菜单按钮（Menu Button）示例</h2>
<p>标准菜单按钮：</p>
<a href="javascript:void(0)" id="mb-edit" class="easyui-menubutton"
data-options="menu:'#mm-edit',iconCls:'icon-edit'">编辑</a>
<div id="mm-edit" class="easyui-menu" style="width:150px;">
<div data-options="iconCls:'icon-cut'">剪切</div>
<div data-options="iconCls:'icon-copy'">复制</div>
<div data-options="iconCls:'icon-paste'">粘贴</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">删除</div>
</div>
<p>工具栏风格：</p>
<div style="padding:10px;background:#eee;">
<a href="#" class="easyui-menubutton" data-options="menu:'#mm-file',plain:true">文件</a>
<a href="#" class="easyui-menubutton" data-options="menu:'#mm-help',plain:true,iconCls:'icon-help'">帮助</a>
</div>
<div id="mm-file" class="easyui-menu">
<div>新建</div>
<div>打开</div>
<div>保存</div>
</div>
<div id="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 集成示例，请继续提问！
