jQuery EasyUI 菜单与按钮 - 创建菜单按钮（Menu Button）
jQuery EasyUI 菜单与按钮 - 创建菜单按钮（Menu Button）
简介
jQuery EasyUI 是一款简单易用的前端框架，提供了大量常用的 UI 组件，其中包括菜单与按钮。创建菜单按钮（Menu Button）可以实现在一个按钮上弹出菜单的功能，用户可以通过选择菜单项来执行操作。
前置条件
在使用 jQuery EasyUI 菜单按钮之前，需要先引入 jQuery 和 EasyUI 的相关库文件。同时需要注意，Menu Button 组件需要依赖 Menu 组件。
<!-- 引入 jQuery 和 EasyUI 相关库文件 -->
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<!-- 创建菜单按钮所需额外引入的 Menu 组件 -->
<script type="text/javascript" src="jquery.easyui.min.js"></script>
创建菜单按钮
在 HTML 页面中创建菜单按钮的代码如下：
<a href="#" class="easyui-menubutton" data-options="menu:'#mm',iconCls:'icon-save'">Save</a>
<!-- 菜单项 -->
<div id="mm" style="width:120px;">
<div data-options="iconCls:'icon-cut',disabled:true">Cut</div>
<div data-options="iconCls:'icon-copy'">Copy</div>
<div data-options="iconCls:'icon-paste'">Paste</div>
<div class="menu-sep"></div> <!-- 分隔符 -->
<div>Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
</div>
其中，.easyui-menubutton 是 EasyUI 提供的样式类，data-options 属性是用来配置组件的选项。menu 选项用来指定菜单项的 ID，iconCls 选项用来指定按钮的图标。
菜单项的 HTML 代码需要写在菜单项的 ID 为 mm 的 div 元素中。.menu-sep 是 EasyUI 提供的样式类，用来创建菜单项之间的分隔符。
实现交互逻辑
当用户单击菜单按钮时，菜单项会弹出并展示在界面上。用户可以点击菜单项来执行操作。接下来我们来实现点击菜单项后的交互逻辑。
$(function() {
$('#mm').menu({
onClick: function(item) {
alert(item.name);
}
});
});
以上代码使用了 jQuery 的 ready 函数，在文档就绪后初始化菜单。menu 函数用来创建菜单，并接受一个配置对象作为参数。
其中，onClick 回调函数会在用户点击菜单项时被调用，并接受一个传入参数 item，其中包含了被点击菜单项的相关信息。在本例中，我们只是简单地弹出一个 alert，显示被点击菜单项的名称。
总结
本文介绍了如何使用 jQuery EasyUI 创建菜单按钮，并实现交互逻辑。通过合理结合使用菜单、菜单项、菜单按钮等组件，我们可以创建出丰富多样的界面效果，提升用户体验。