如何使用jQuery-ContextMenu实现右击菜单

    最近在做项目中，遇到一个棘手的问题，页面上有很多功能需要实现，每个功能需要绑定一个按钮。如果一个功能绑定一个按钮，那么将会占用页面很大的空间，而且可能会使页面变得不美观。思前想后，决定将所有按钮做成右键菜单里。于是便找到了jQuery-ContextMenu这款插件。使用简单，效果也很不错。接下来就为大家简述一下该如何使用这款插件。

一、引入资源文件

    我们需要在html页面里引入三个资源文件，分别jquery的js文件，jquery-contextMenu的js和css文件，如下所示：

<script src="../../libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../libs/jQuery-contextMenu/jquery.contextMenu.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../libs/jQuery-contextMenu/jquery.contextMenu.min.css">
<link href="../../fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

二、将jquery-contextMenu绑定到元素中

  我们假设html中待绑定的元素的代码如下：

<span class="context-menu-one btn btn-neutral">right click me</span>

  确定好绑定的元素后，需要写入一下js代码：

$.contextMenu({
					  selector: "span.context-menu-one",
				      items: {
				        "新增Folder": {name: "新增Folder", icon: "fa-plus",
				            callback: function(key, opt){
				              addFolder();
				            }
				        },
				        "批量创建计划": {name: "批量创建计划", icon: "fa-plus-square",
				        	callback: function(key, opt){
				        		bulkCreatePlan();
				            }
				        },
				    },
			        callback: function(itemKey, opt) {
			        	var node = $.ui.fancytree.getNode(opt.$trigger);
			        	alert("select " + itemKey + " on " + node);
			        }
				});

   其中，selector字段表示待绑定元素的位置信息；items中包括“新增Folder”和“批量创建计划”两个右击菜单选项，callback里可以定义菜单选项需要响应的事件。

   效果如下图所示：

   

三、配合font-awesome使用

    当我们需要给右击菜单绑定多个菜单选项时，每项功能需要对应一个图标，这个时候，我们可以使用font-awesome图标来满足我们的需求。

    1）首先，我们在html中引入font-awesome的资源文件font-awesome.min.css

<link href="../../fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

    2）然后，在items里的icon字段写上图标的标签，例如：

    需要注意的是，引入的font-awesom.min.css的版本必须在4.7.0以上