一、什么是jquery-contextify
jquery-contextify是一款基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单使用Bootstrap的下拉菜单组件来制作，通过简单的配置即可在指定元素上生成右键菜单。
二、资源地址：
下方是该插件的下载地址，里面有该插件的使用教程
www.htmleaf.com/jQuery/Menu…
三、如何使用：
最近项目上需要一个右键功能菜单的操作功能，所以在网络上也发现了这个插件，下面是我使用的代码
1、引用css和js
<link rel="stylesheet" href="bootstrap.min.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.contextify.js"></script>
2、创建HTML代码
<div class="htmleaf-container">
<div class='demo' data-name='1'><img src='1.png'/></div>
<div><hr/></div>
<div class='demo' data-name='2'><img src='1.png'/></div>
<div><hr/></div>
<div class='demo' data-name='3'><img src='1.png'/></div>
<div><hr/></div>
<div class='demo' data-name='4'><img src='1.png'/></div>
<div><hr/></div>
<div class='demo' data-name='5'><img src='1.png'/></div>
<div><hr/></div>
<div class='demo' data-name='6'><img src='1.png'/></div>
</div>
3、JS代码
<script>
var options = {items:[
{header: '右键功能菜单'},
{divider: true},
{text: '编辑', onclick: function(e) {
alert("编辑："+e.data.name)
}},
{text: '删除', onclick: function(e) {
alert("删除"+e.data.name)
}},
{divider: true},
]}
//通过类class选择器，为class为demo的标签设置右键菜单功能，这里的contextify就是该插件的方法
$('.demo').contextify(options);
</script>
4、效果图
这里我们右键就可以显示菜单了，同时点击编辑，就显示了我们设置的值，我们可以在这里调用需要执行的方法
四、问题
如果html页面只有当前大小，并没有滚动条时，功能的确是正常的，但是如果我们页面比较长，比如是一个分页的表格，由于一次查看的数据过多，就会出现滚动条，这个时候我们滚动到下面去右键时，发现菜单出现的位置就不正确了，如下图：
1、没有滚动条，或者是滚动条在最上面的情况，右键菜单没有问题。
2、滚动条在下面的时候
出现这种问题是为什么呢，我们查看jquery.contextify.js的源码
这里有一段是用来获取当前点击对象所在位置和浏览器大小来进行右键菜单定位的，这里的position设置的是fixed定位。那什么是fixed定位呢，就是元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，所以当我们有滚动条的时候，这种定位就不适用了。所以我们可以将这里的fixed定位改为absolute定位。
修改以后。我们再看效果
下方的关于position定位的链接，如果不明白可以看看：
www.runoob.com/css/css-pos…
五、总结
只有适合自己的东西才是最好的
