jQuery Context Menu 右键菜单

引入JS和CSS

< script  src ="jquery.js"  type ="text/javascript" ></ script >
< script  src ="jquery.contextMenu.js"  type ="text/javascript" ></ script >
< link  href ="jquery.contextMenu.css"  rel ="stylesheet"  type ="text/css"   />

 

菜单条的HTML定义

< ul  id ="myMenu"  class ="contextMenu" >  
     < li  class ="edit" >< a  href ="#edit" > Edit </ a ></ li >  
     < li  class ="cut separator" >< a  href ="#cut" > Cut </ a ></ li >  
     < li  class ="copy" >< a  href ="#copy" > Copy </ a ></ li >  
     < li  class ="paste" >< a  href ="#paste" > Paste </ a ></ li >  
     < li  class ="delete" >< a  href ="#delete" > Delete </ a ></ li >  
     < li  class ="quit separator" >< a  href ="#quit" > Quit </ a ></ li >  
</ ul >

 

调用

$(document).ready(  function () {    
    $( " #selector " ).contextMenu({
        menu:  ' myMenu '   // 菜单条UL的ID
    },
         function (action, el, pos) {  // 单击菜单条的事件
        alert(
             ' Action:  '   +  action  +   ' \n\n '   +
             ' Element ID:  '   +  $(el).attr( ' id ' )  +   ' \n\n '   +  
             ' X:  '   +  pos.x  +   '   Y:  '   +  pos.y  +   '  (relative to element)\n\n '   +  
             ' X:  '   +  pos.docX  +   '   Y:  '   +  pos.docY +   '  (relative to document) '
            );
    });    
});

 

参数说明

 

action 菜单中A的href(去除#) 
el 被右击元素DOM 
pos.x 相对于被右击元素的X坐标 
pos.y 
pos.docX 绝对X坐标 
pos.docY

 

方法

disableContextMenu() 
enableContextMenu() 
disableContextMenuItems(“#option1,#option2, " ) 
enableContextMenuItems(“#option1,#option2, " ) 
destroyContextMenu()

 

演示

下载

 

 

转载于:https://www.cnblogs.com/fdszlzl/archive/2009/06/28/1512886.html