jquery contextmenu右键菜单 DOM元素的上下文菜单2018-01-24 20:36

许多小伙伴刚接触代码的时候，看到某些效果会觉得很酷、很惊奇。

比如说在普通的网页上面可以右键复制、粘贴。

而在某些网页上面，右键出来的却是完全不同的菜单，而且还有漂亮的样式。

其实这些都得感谢jquery contextMenu方法。

下面我们来看一个完整实例，或许你会有用到的地方。 html代码

$(document).ready(function(e) {

$('#the-node').contextMenu({

selector: 'li',

callback: function(key, options) {

var m = "点击了: " + key;

window.console && console.log(m) || alert(m);

},

items: {

"edit": {name: "编辑", icon: "edit"},

"cut": {name: "剪切", icon: "cut"},

"copy": {name: "复制", icon: "copy"},

"paste": {name: "粘贴", icon: "paste"},

"delete": {name: "删除", icon: "delete"},

"sep1": "---------",

"quit": {name: "退出", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}

}

});

});

你可以根据自己的需求修改jquery contextmenu相关的功能，以求达到更完美的效果。