jEasyUI 创建简单的菜单学习笔记
1. 引入jEasyUI库
在HTML文件中引入jEasyUI库的js和css文件,可以通过官方网站下载或使用CDN。
htmlCopy Code<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.10.0/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.10.0/themes/icon.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.11.3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-easyui@1.10.0/jquery.easyui.min.js"></script>
</head>
2. 创建菜单
使用menu
组件创建菜单,在菜单中添加菜单项和子菜单。
htmlCopy Code<body>
<div id="mm" class="easyui-menu" style="width:120px;">
<div data-options="iconCls:'icon-reload',onClick:refresh">刷新</div>
<div>编辑</div>
<div>保存</div>
<div class="menu-sep"></div>
<div>
<span>格式化</span>
<div>
<div>字体</div>
<div>颜色</div>
</div>
</div>
</div>
</body>
3. 初始化菜单
创建菜单后,需要对其进行初始化操作。
javascriptCopy Code<script type="text/javascript">
$(function () {
$('#mm').menu();
});
</script>
4. 调用菜单
在需要使用菜单的元素上绑定右键菜单,当鼠标右键点击该元素时,菜单将被调用。
htmlCopy Code<body oncontextmenu="return false;">
<div class="easyui-panel" title="右键调用菜单" style="width:100%;height:100%;" onmousedown="showMenu(event);">
<p>右键点击此处会弹出菜单。</p>
</div>
</body>
<script type="text/javascript">
function showMenu(e) {
e.preventDefault();
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
</script>
在上述示例中,我们在<body>
元素上通过oncontextmenu="return false;"
禁用了默认的右键菜单。在<div>
元素上通过onmousedown="showMenu(event);"
绑定右键菜单,当用户右键点击该元素时,showMenu()
函数会被执行,然后调用菜单。
示例
点击这里查看完整示例。