jQuery EasyUI 菜单与按钮 - 创建简单的菜单
jQuery EasyUI 菜单与按钮 - 创建简单的菜单
jQuery EasyUI提供了强大的Menu（菜单）和LinkButton（链接按钮）组件。本教程将展示如何创建最基本的下拉菜单（包括顶级菜单和子菜单）、上下文菜单（右键菜单）以及使用按钮触发菜单。
官方参考：
- Menu 文档：https://www.jeasyui.com/documentation/menu.php
- LinkButton 文档：https://www.jeasyui.com/documentation/linkbutton.php
- 教程示例：https://www.jeasyui.com/tutorial/menu/menu1.php
步骤 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: 创建最简单的下拉菜单（通过按钮触发）
<!-- 按钮 --><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-ok"onclick="showMenu()">操作菜单</a><!-- 菜单定义（隐藏在页面中） --><divid="mm"class="easyui-menu"style="width:150px;"><divdata-options="iconCls:'icon-add'">新增</div><divdata-options="iconCls:'icon-edit'">编辑</div><divdata-options="iconCls:'icon-remove'">删除</div><divclass="menu-sep"></div><!-- 分隔线 --><divdata-options="iconCls:'icon-save'">保存</div><div><span>更多...</span><div><divdata-options="iconCls:'icon-cut'">剪切</div><divdata-options="iconCls:'icon-copy'">复制</div><divdata-options="iconCls:'icon-paste'">粘贴</div></div></div></div>步骤 3: JavaScript 控制菜单显示
<scripttype="text/javascript">functionshowMenu(){$('#mm').menu('show',{left:200,// 可选：指定位置top:100});}</script>步骤 4: 完整示例（带按钮触发 + 右键上下文菜单）
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI 简单菜单</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>简单菜单示例</h2><!-- 按钮触发菜单 --><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-ok"plain="true"onclick="showMenu()">点击打开菜单</a><!-- 下拉菜单 --><divid="mm"class="easyui-menu"style="width:180px;"><divdata-options="iconCls:'icon-add'">新增</div><divdata-options="iconCls:'icon-edit'">编辑</div><divdata-options="iconCls:'icon-remove'">删除</div><divclass="menu-sep"></div><divdata-options="iconCls:'icon-save'">保存</div><div><span>编辑选项</span><div><divdata-options="iconCls:'icon-cut'">剪切</div><divdata-options="iconCls:'icon-copy'">复制</div><divdata-options="iconCls:'icon-paste'">粘贴</div></div></div></div><!-- 右键上下文菜单（绑定到整个页面） --><divid="contextMenu"class="easyui-menu"style="width:150px;"><divdata-options="iconCls:'icon-reload'">刷新</div><divdata-options="iconCls:'icon-print'">打印</div><divclass="menu-sep"></div><divdata-options="iconCls:'icon-help'">帮助</div></div><scripttype="text/javascript">$(function(){// 按钮点击显示菜单$('#mm').menu({onClick:function(item){$.messager.alert('提示','您选择了：'+item.text);}});// 右键上下文菜单（整个页面）$(document).bind('contextmenu',function(e){e.preventDefault();$('#contextMenu').menu('show',{left:e.pageX,top:e.pageY});});});functionshowMenu(){$('#mm').menu('show');}</script></body></html>关键说明
- 菜单项：使用
<div>标签，data-options指定图标、文本等。 - 子菜单：在
<div>内再嵌套一个<div>即可实现多级菜单。 - 分隔线：使用
<div class="menu-sep"></div> - 事件：
onClick事件可捕获用户点击的菜单项。 - 显示方式：
menu('show', {left, top})指定位置显示。- 按钮点击或右键触发都非常方便。
- 右键菜单：通过
$(document).bind('contextmenu', ...)实现。
更多高级用法
- 与datagrid结合：行右键菜单。
- 与toolbar结合：工具栏下拉菜单。
- 使用menubutton：一个按钮自带下拉菜单（更常见于工具栏）。
<!-- 更常用的 Menubutton --><ahref="javascript:void(0)"class="easyui-menubutton"menu="#mm"iconCls="icon-edit">编辑</a>如果需要工具栏菜单、datagrid 右键菜单、或完整源码示例，请告诉我！