前段时间在做工程项目中，碰到两个头疼的难题，网页上有许多机能须要同时实现，每一机能须要存取两个按键。假如两个机能存取两个按键，所以Sonbhadra挤占网页非常大的内部空间，所以可能会使网页显得粗大。无视于，下定决心将大部份按键弄成右键工具栏里。只好便找出了jQuery-ContextMenu此款应用程序。采用单纯，效用也很极好。接下去就为我们详述呵呵该怎样采用此款应用程序。
一、导入天然资源文档
他们须要在html网页里导入四个天然资源文档，依次jquery的js文档，jquery-contextMenu的js和css文档，如下表右图右图：
[html] view plain copy
<scriptsrc=”../../libs/jquery/jquery-2.1.4.min.js”></script>
<scripttype=”text/javascript”src=”../../libs/jQuery-contextMenu/jquery.contextMenu.min.js”></script>
<linkrel=”stylesheet”type=”text/css”href=”../../libs/jQuery-contextMenu/jquery.contextMenu.min.css”>
<linkhref=”../../fonts/font-awesome-4.7.0/css/font-awesome.min.css”rel=”stylesheet”>
二、将jquery-contextMenu存取到原素中
他们假定html中待存取的原素的标识符如下表右图：
<spanclass=”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”和“批量创建计划”两个holds工具栏选项，callback里可以定义工具栏选项须要响应的事件。
效用如下表右图图右图：
三、配合font-awesome采用
当他们须要给holds工具栏存取多个工具栏选项时，每项机能须要对应两个图标，这个时候，他们可以采用font-awesome图标来满足他们的需求。
1）首先，他们在html中导入font-awesome的天然资源文档font-awesome.min.css
<linkhref=”../../fonts/font-awesome-4.7.0/css/font-awesome.min.css”rel=”stylesheet”>
2）然后，在items里的icon字段写上图标的标签，例如：
须要注意的是，导入的font-awesom.min.css的版本必须在4.7.0以上。
