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

最新推荐文章于 2025-11-29 04:59:40 发布

最新推荐文章于 2025-11-29 04:59:40 发布 · 1.3k 阅读

文章标签：

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

jquery 专栏收录该内容

69 篇文章

订阅专栏

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

[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" onclick="onItemClick">新建</li>
<li class="separator"></li>
<li iconCls="icon-add" onclick="onItemClick">增加</li>
<li iconCls="icon-edit" onclick="onItemClick">修改</li>
<li iconCls="icon-remove" onclick="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;
});
}