JQuery right-click menu plug-in ContextMenu usage guide_jquery

Plug-in download address:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js

Compressed version:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js

Jquery homepage: http://jquery.com/

Through this plug-in, contextmenu can be established within different html elements and the styles can be customized.

Copy code The code is as follows:

 
 
 
 
 
 
 
    右键点此
 

---

    右键点此

---

  不显示

---

  显示第一项

---

  显示全部

---

   
    

     

       
• 打开

       
• 邮件

       
• 保存

       
• 关闭

     

   

   

       

         
• 选项一

         
• 选项二

         
• 选项三

         
• 选项四

       

  

    

        

         
• csdn

         
• javaeye

         
• itpub

       

   

<script><br> //All span tags with class demo1 will be bound to this right-click menu <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> //All html elements with the ID of demo2 are bound to this right-click menu <br> $('#demo2').contextMenu('myMenu2', {<br> //Menu style<br> menuStyle: {<br>          border: '2px solid #000'<br> },<br> //Menu item style<br> ItemStyle: {<br>          fontFamily : 'verdana',<br> backgroundColor: 'green',<br>         color: 'white',<br>          border: 'none',<br>          padding: '1px'<br> },<br> //Menu item mouseover style<br> itemHoverStyle: {<br>         color: 'blue',<br> backgroundColor: 'red',<br>          border: 'none'<br> },<br> //Events <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> //All div tags with class demo3 are bound to this right-click menu <br> $('div.demo3').contextMenu('myMenu3', {<br> //Rewrite onContextMenu and onShowMenu events<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>

Rendering:

It’s a very fun and cool function. Friends, you can beautify it and add it to your own projects