<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Public/jquery-1.8.2.min.js" type="text/javascript"></script>
<%-- <script src="../../Public/JS/jquery-1.6.2.js" type="text/javascript"></script>--%>
<script src="Public/jquery.contextMenu.js" type="text/javascript"></script>
<link href="Public/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$.contextMenu({
selector: '.1',
callback: function (key, options) {
var m = "global: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {
name: "Edit",
icon: "edit",
// superseeds "global" callback
callback: function (key, options) {
var m = "edit was clicked";
alert(m);
}
},
"cut": { name: "Cut", icon: "cut" },
"copy": { name: "Copy", icon: "copy" },
"paste": { name: "Paste", icon: "paste" },
"delete": { name: "Delete", icon: "delete" },
"sep1": "---------",
"quit": { name: "Quit", icon: "quit" }
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="the-node">
<li class="1"><span>right click me 1</span></li>
<li class="1"><span>right click me 2</span></li>
<li>right click me 3</li>
<li>right click me 4</li>
</ul>
</form>
</body>
</html>
注:
jQuery-contextMenu V1.6.5官网使用的jquery是
jquery-1.8.2.min.js
但是也可以用
jquery-1.6.2.js
两者任选其一,一起则会出错
本文中jQuery-contextMenu版本为1.6.5
可结合dhtmlxDataView一起使用,实现数据显示及菜单右击
官网demo http://medialize.github.io/jQuery-contextMenu/demo/callback.html
文章使用相关js文件 http://download.csdn.net/detail/chenxiang199055/6448645