下载地址:
http://www.trendskitchens.co.nz/jquery/contextmenu/
1)现在页面上用html组成菜单
<div class="contextMenu" id="cxtmenu">
<ul>
<li id="posmake"><img src="images/folder.png" />分配</li>
<li id="cancelreq"><img src="images/folder.png" />取消</li>
<li id="standmk"><img src="images/folder.png" /> 分配2</li>
</ul>
</div>
2)在页面上引用jQuery和contextmenu插件文件
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.contextmenu.r2.packed.js"></script>
3)建立右键菜单
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('span').contextMenu('cxtmenu', { //点击所有Span标签都会弹出右键菜单
onShowMenu: function(e, menu) {
if (!$(e.target).attr('readonly')) {
//如果,点击的对象有readonly属性
$('#posmake', menu).remove(); //去掉菜单的2项
$('#cancelreq', menu).remove();
}else{
$('#standmk',menu).remove();//否则去除一项
}
return menu;
},
bindings: {
'posmake': function(t) {
alert('Trigger was '+t.id+'\nAction was Open');
},
'cancelreq': function(t) {
alert('Trigger was '+t.id+'\nAction was Email');
},
'standmk': function(t) { //id为standmk的菜单项被点后
alert('Trigger was '+t.id+'\nAction was Email');
//t.id指示出被点的标签的id属性
}
}
});