在Struts项目中很少使用右键菜单，但是一旦客户有需求，很多人就会感到困惑，比如我。这个时候，你当然要冷静。一边拍着胸脯，一边向客户承诺可以实现，要快速打开百度神器搜索，看看有没有前人写过的插件。

因此找到了jQuery的ContextMenu插件。去官网看看Demo，真的很不错，正是我想要的。源代码下来了，但是文档没有告诉我们怎么组装。可能写这个插件的牛觉得步骤太简单，羞于写出来。但我们是无知的人。经过长时间的学习，我们终于从一堆代码中取其精华，去其糟粕，形成了最简洁的代码，供初学者参考。

官网下载地址：http://plugins.jquery.com/contextMenu/

我在这里下载了1.6.6版本。源目录结构如下：

里面有一个demo.html档案，这是我们要研究的对象。打开这个文件，可以试试效果，感觉还不错。

但是，如果用记事本或其他编辑器查看源代码，会觉得头晕。恐怖对于一堆js文件和css文件来说不是必须的，所以我们要自己调试，插件作者也不会告诉我们。

好的，由于时间限制，我已经为大家删除了多余的代码。简化代码如下：

html head title jquery context menu Plugin Demo/title script src=' http : jquery-1 . 8 . 2 . min . js ' type=' text/JavaScript '/script script src=' http : src/jquery . context menu . js ' type=' text/JavaScript '/script link href=' src/jquery . context menu . CSS ' rel=' external nofollow ' rel='样式表' type='text/css' /流头dydivcontextMenu({ selector: '。上下文菜单一，回调：函数(键，选项){ var m='clicked: '键；window . console console . log(m)| | alert(m)；}，items : { ' Edit ' : { name : ' Edit '，icon: 'edit'}，' cut': {name: 'Cut '，icon: 'cut'}，' copy': {name: 'Copy '，icon: 'copy'}，' paste ' : { name: ' Paste '，icon: ' paste ' }，$('.上下文菜单-一')。on('click '，function(e){ console . log(' click '，this)；})});/脚本/正文/html运行效果：

根据这个简化的代码，我们可以知道如何使用这个插件。

第一步：将核心文件jquery-1.8.2.min.js、jquery.contextMenu.js和jquery.contextMenu.css复制到我们的项目中。

第二步：编写javascript脚本，生成菜单和相应的菜单动作。

$(function(){ $)。contextMenu({ selector: '。上下文菜单一，回调：函数(键，选项){ var m='clicked: '键；window . console console . log(m)| | alert(m)；}，items : { ' Edit ' : { name : ' Edit '，icon: 'edit'}，' cut': {name: 'Cut '，icon: 'cut'}，' copy': {name: 'Copy '，icon: 'copy'}，' paste ' : { name: ' Paste '，icon: ' paste ' }，$('.上下文菜单-一')。on('click '，function(e){ console . log(' click '，this)；})});第三步：在适当的位置设置右键菜单。

div class=' context-menu-one ' strong右键单击我/strong/div以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。