JQuery右键菜单插件ContextMenu使用指南_jquery

 
 
 
 
 
 
 
    右键点此
 

---

---

---

---

---

   
    
   
    
 
 <script><br /> //所有class为demo1的span标签都会绑定此右键菜单<br /> $('span.demo1').contextMenu('myMenu1', <br /> {<br /> bindings: <br /> {<br /> 'open': function(t) {<br /> alert('Trigger was '+t.id+'\nAction was Open');<br /> },<br /> 'email': function(t) {<br /> alert('Trigger was '+t.id+'\nAction was Email');<br /> },<br /> 'save': function(t) {<br /> alert('Trigger was '+t.id+'\nAction was Save');<br /> },<br /> 'delete': function(t) {<br /> alert('Trigger was '+t.id+'\nAction was Delete');<br /> }<br /> }<br /> });<br /> //所有html元素id为demo2的绑定此右键菜单<br /> $('#demo2').contextMenu('myMenu2', {<br /> //菜单样式<br /> menuStyle: {<br /> border: '2px solid #000'<br /> },<br /> //菜单项样式<br /> itemStyle: {<br /> fontFamily : 'verdana',<br /> backgroundColor : 'green',<br /> color: 'white',<br /> border: 'none',<br /> padding: '1px'<br /> },<br /> //菜单项鼠标放在上面样式<br /> itemHoverStyle: {<br /> color: 'blue',<br /> backgroundColor: 'red',<br /> border: 'none'<br /> },<br /> //事件 <br /> bindings: <br /> {<br /> 'item_1': function(t) {<br /> alert('Trigger was '+t.id+'\nAction was item_1');<br /> },<br /> 'item_2': function(t) {<br /> alert('Trigger was '+t.id+'\nAction was item_2');<br /> },<br /> 'item_3': function(t) {<br /> alert('Trigger was '+t.id+'\nAction was item_3');<br /> },<br /> 'item_4': function(t) {<br /> alert('Trigger was '+t.id+'\nAction was item_4');<br /> }<br /> }<br /> });<br /> //所有div标签class为demo3的绑定此右键菜单<br /> $('div.demo3').contextMenu('myMenu3', {<br /> //重写onContextMenu和onShowMenu事件<br /> onContextMenu: function(e) {<br /> if ($(e.target).attr('id') == 'dontShow') return false;<br /> else return true;<br /> },<br /> onShowMenu: function(e, menu) {<br /> if ($(e.target).attr('id') == 'showOne') {<br /> $('#item_2, #item_3', menu).remove();<br /> }<br /> return menu;<br /> }<br /> });<br /> </script>