个人参考：
用jquery的ContextMenu插件设置右键菜单： https://blog.csdn.net/seabreezesuper/article/details/54862741
自定义jQuery-ContextMenu插件的图标：https://blog.csdn.net/seabreezesuper/article/details/54890831
问题： jQuery-ContextMenu插件如何使用fontawesome插件图标？ 请@我
具体参考官网：
官网下载地址：http://plugins.jquery.com/contextMenu/
和官方文档：http://swisnl.github.io/jQuery-contextMenu/docs.html
实例参考解压包里边的demo.html文件
引用：将解压包中的核心文件拷贝到自己项目中，引用css 和 js 文件即可使用。
个人练习：
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>右击菜单</title>
<link rel="stylesheet" href="./plugins/contextMenu/jquery.contextMenu.css" type="text/css">
<script type="text/javascript" src="./plugins/contextMenu/jquery-1.8.2.min.js"></script> <!-- 压缩包里的js,不影响样式 -->
<script type="text/javascript" src="./plugins/contextMenu/jquery.contextMenu.js"></script>
<style>
/* css添加标题 content与伪类和伪元素 */
.css-title:before {
content: "some CSS title";
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
background: #DDD;
padding: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.css-title :first-child {
margin-top: 20px;
}
/* js添加标题 */
.data-title:before {
content: attr(data1-menutitle); /* content内容在CSS里不想写死，可使用attr表达式来从页面元素中动态的获取内容。注意属性名称上不要加引号！ */
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
background: #DDD;
padding: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.data-title :first-child {
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li class="context-menu-right"> 右击</li>
<li class="context-menu-left">左击</li>
<li class="context-menu-hover">hover触发</li>
<li class="context-menu-change">changing disable</li>
<li class="context-menu-sub">子菜单</li>
<li class="context-menu-jstitle">js设置菜单标题</li>
<li class="context-menu-csstitle">css设置菜单标题</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$.contextMenu({
selector: '.context-menu-right',
callback: function(key, options){ //key为items的键，options为items的数据对象。
if(key == 'edit'){
alert(key + '--' + options.items.edit.name);
}
if(key == 'copy'){
alert(key + '--' + options.items.copy.name);
}
if(key == 'delete'){
alert(key + '--' );
}
},
items: {
"add": {name: "添加", icon: "add"}, //icon: 为图标。{}可以放数据id: $('').val()
"edit": {name: "修改", icon: "edit"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste",callback: function(key,options){alert(key);}},
"delete": {name: "Delete", icon: "delete",callback: function(key,options){return false;}}, //禁用
"sep1": "---------",
"quit": {name: "Quit", icon: "quit",disabled:true}, //禁用，灰色,或者disabled: function(){ return true; }
"Pencil": {name: "自定义图标", icon: "Pencil"},
"Search": {name: "自定义图标", icon: "Search"}
}
});
$.contextMenu({
selector: '.context-menu-left',
trigger: 'left', //左击触发
callback: function(key, options){
if(key == 'edit'){
alert(key + '--' + options.items.edit.name);
}
if(key == 'copy'){
alert(key + '--' + options.items.copy.name);
}
},
items: {
"edit": {name: "Edit", icon: "edit", accesskey: "e"}, //快捷键
"cut": {name: "Cut", icon: "cut", accesskey: "c"},
// first unused character is taken (here: o)
"copy": {name: "Copy", icon: "copy", accesskey: "c o p y"}, //首先使用未使用的字符（这里：o）
// words are truncated to their first letter (here: p)
"paste": {name: "Paste", icon: "paste", accesskey: "cool paste"}, //单词被截断到他们的第一个字母（这里：p）.
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
$.contextMenu({
selector: '.context-menu-hover',
trigger: 'hover', //hover触发
delay: 1000, //一秒
autoHide: true, //鼠标离开hover区自动隐藏激活,若不设置，需点击其他区才能隐藏。
callback: function(key, options){
if(key == 'edit'){
alert(key + '--' + options.items.edit.name);
}
if(key == 'copy'){
alert(key + '--' + options.items.copy.name);
}
},
items: {
"add": {name: "添加", icon: "edit"},
"edit": {name: "修改", icon: "edit"},
"copy": {name: "Copy", icon: "copy"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
$.contextMenu({
selector: '.context-menu-change',
callback: function(key, options) {
if(key == 'edit'){
alert(key + '--' + options.items.edit.name);
}
if(key == 'copy'){
alert(key + '--' + options.items.copy.name);
}
},
items: {
"edit": {name: "Clickable", icon: "edit"},
"cut": {
name: "Disabled",
icon: "cut",
disabled: function(key, opt) {
return !this.data('cutDisabled'); //从被选元素中返回附加的数据
}
},
"toggle": {
name: "Toggle",
callback: function() {
this.data('cutDisabled', !this.data('cutDisabled')); //向被选元素附加数据。
return false;
}
}
}
});
$.contextMenu({
selector: '.context-menu-sub',
callback: function(key, options) {
if(key == 'edit'){
alert(key + '--' + options.items.edit.name);
}
if(key == 'fold1key1'){
alert(key + '--' + options.items.fold1.items.fold1key1.name); //一级一级取值，‘-’为不识别。
}
if(key == 'fold2key1'){
alert(key + '--' + options.items.fold1.items.fold2.items.fold2key1.name);
}
if(key=='fold2-key2'){alert(key)};
if(key=='fold2-key3'){alert(key)};
if(key=='fold3-key1'){alert(key)};
},
items: {
"edit": {"name": "Edit", "icon": "edit"},
"cut": {"name": "Cut", "icon": "cut"},
"sep1": "---------",
"quit": {"name": "Quit", "icon": "quit"},
"sep2": "---------",
"fold1": {
"name": "Sub group",
"items": { //子菜单, items里嵌套items
"fold1key1": {"name": "Foo bar"},
"fold2": {
"name": "Sub group 2",
"items": {
"fold2key1": {"name": "alpha"},
"fold2-key2": {"name": "bravo"},
"fold2-key3": {"name": "charlie"}
}
},
"fold1-key3": {"name": "delta"}
}
},
"fold1a": {
"name": "Other group",
"items": {
"fold1a-key1": {"name": "echo"},
"fold1a-key2": {"name": "foxtrot"},
"fold1a-key3": {"name": "golf"}
}
}
}
});
$.contextMenu({
selector: '.context-menu-jstitle',
className: 'data-title',
callback: function(key, options){
if(key == 'edit'){
alert(key + '--' + options.items.edit.name);
}
if(key == 'copy'){
alert(key + '--' + options.items.copy.name);
}
},
items: {
"add": {name: "添加", icon: "edit"},
"edit": {name: "修改", icon: "edit"},
"copy": {name: "Copy", icon: "copy"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
// set a title: 修改attr(data-menutitle)的值
$('.data-title').attr('data1-menutitle', "Some JS Title");
$.contextMenu({
selector: '.context-menu-csstitle',
className: 'css-title',
callback: function(key, options){
if(key == 'edit'){
alert(key + '--' + options.items.edit.name);
}
if(key == 'copy'){
alert(key + '--' + options.items.copy.name);
}
},
items: {
"add": {name: "添加", icon: "edit"},
"edit": {name: "修改", icon: "edit"},
"copy": {name: "Copy", icon: "copy"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
});
</script>
</html>