jQuery MiniUI 开发教程导航控件 ContextMenu：右键菜单（四）

于 2012-12-21 16:43:00 发布 · 1.2k 阅读

文章标签：

#jquery #javascript #UI #Ajax #contextMenu #ViewUI

jquery 专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一个使用miniUI创建右键菜单(ContextMenu)的方法。通过HTML和JavaScript实现自定义的右键菜单，包括新建、增加、修改、删除等操作选项，并展示了如何通过JavaScript处理这些选项的点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]ContextMenu：右键菜单[/b]
[img]http://www.miniui.com/docs/api/images/contextmenu.gif[/img]

参考示例：[url=http://www.miniui.com/demo/menu/contextmenu.html]ContextMenu：右键菜单[/url]

[b]创建ContextMenu[/b]
<ul id="contextMenu" class="mini-contextmenu" >
<li>
<span >操作</span>
[list]
<li iconCls="icon-new" οnclick="onItemClick">新建</li>
<li class="separator"></li>
<li iconCls="icon-add" οnclick="onItemClick">增加</li>
<li iconCls="icon-edit" οnclick="onItemClick">修改</li>
<li iconCls="icon-remove" οnclick="onItemClick">删除</li>
[/list]
</li>
<li class="separator"></li>
<li iconCls="icon-open" >打开</li>
<li iconCls="icon-remove" >关闭</li>
</ul>

[b]Javascript处理[/b]
function onItemClick(e) {
var item = e.sender;
alert(item.getText());
}

window.onload = function () {
$("#region1").bind("contextmenu", function (e) {
var menu = mini.get("contextMenu");
menu.showAtPos(e.pageX, e.pageY);
return false;
});
}