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 资源
<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 href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="showMenu()">操作菜单</a>
<!-- 菜单定义（隐藏在页面中） -->
<div id="mm" class="easyui-menu" style="width:150px;">
<div data-options="iconCls:'icon-add'">新增</div>
<div data-options="iconCls:'icon-edit'">编辑</div>
<div data-options="iconCls:'icon-remove'">删除</div>
<div class="menu-sep"></div> <!-- 分隔线 -->
<div data-options="iconCls:'icon-save'">保存</div>
<div>
<span>更多...</span>
<div>
<div data-options="iconCls:'icon-cut'">剪切</div>
<div data-options="iconCls:'icon-copy'">复制</div>
<div data-options="iconCls:'icon-paste'">粘贴</div>
</div>
</div>
</div>步骤 3: JavaScript 控制菜单显示
<script type="text/javascript">
function showMenu(){
$('#mm').menu('show', {
left: 200, // 可选：指定位置
top: 100
});
}
</script>步骤 4: 完整示例（带按钮触发 + 右键上下文菜单）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 简单菜单</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>简单菜单示例</h2>
<!-- 按钮触发菜单 -->
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" plain="true" onclick="showMenu()">点击打开菜单</a>
<!-- 下拉菜单 -->
<div id="mm" class="easyui-menu" style="width:180px;">
<div data-options="iconCls:'icon-add'">新增</div>
<div data-options="iconCls:'icon-edit'">编辑</div>
<div data-options="iconCls:'icon-remove'">删除</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-save'">保存</div>
<div>
<span>编辑选项</span>
<div>
<div data-options="iconCls:'icon-cut'">剪切</div>
<div data-options="iconCls:'icon-copy'">复制</div>
<div data-options="iconCls:'icon-paste'">粘贴</div>
</div>
</div>
</div>
<!-- 右键上下文菜单（绑定到整个页面） -->
<div id="contextMenu" class="easyui-menu" style="width:150px;">
<div data-options="iconCls:'icon-reload'">刷新</div>
<div data-options="iconCls:'icon-print'">打印</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-help'">帮助</div>
</div>
<script type="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
});
});
});
function showMenu(){
$('#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 -->
<a href="javascript:void(0)" class="easyui-menubutton" menu="#mm" iconCls="icon-edit">编辑</a>如果需要工具栏菜单、datagrid 右键菜单、或完整源码示例，请告诉我！
