欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-24 21:35:00
jquery右键菜单插件contextmenu使用指南。插件下载地址: https://www.trendskitchens.co.nz/jquery/contextmenu/j...

jquery右键菜单插件contextmenu使用指南。插件下载地址:
https://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js

压缩版:
https://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js

jquery主页:   https://jquery.com/

通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式.

 

代码如下:


<html>
 <head>
  <title> jquery右键菜单 </title>
  <script  src="jquery-1.2.6.min.js"></script>
  <script src="jquery.contextmenu.r2.js"></script>
 </head>
 <body>
 <span class="demo1" style="color:green;">
    右键点此
 </span>
<hr />
<p id="demo2">
    右键点此
</p>
<hr />
<p class="demo3" id="dontshow">
  不显示
</p>
<hr />
<p class="demo3" id="showone">
  显示第一项
</p>
<hr />
<p class="demo3" id="showall">
  显示全部
</p>
<hr />
    <!--右键菜单的源-->
     <p class="contextmenu" id="mymenu1">
      <ul>
        <li id="open"><img src="folder.png" /> 打开</li>
        <li id="email"><img src="email.png" /> 邮件</li>
        <li id="save"><img src="disk.png" /> 保存</li>
        <li id="delete"><img src="cross.png" /> 关闭</li>
      </ul>
    </p>
    <p class="contextmenu" id="mymenu2">
        <ul>
          <li id="item_1">选项一</li>
          <li id="item_2">选项二</li>
          <li id="item_3">选项三</li>
          <li id="item_4">选项四</li>
        </ul>
   </p>
     <p class="contextmenu" id="mymenu3">
         <ul>
          <li id="item_1">csdn</li>
          <li id="item_2">javaeye</li>
          <li id="item_3">itpub</li>
        </ul>
    </p>
 </body>
 <script>
    //所有class为demo1的span标签都会绑定此右键菜单
     $('span.demo1').contextmenu('mymenu1',
     {
          bindings:
          {
            'open': function(t) {
              alert('trigger was '+t.id+'\naction was open');
            },
            'email': function(t) {
              alert('trigger was '+t.id+'\naction was email');
            },
            'save': function(t) {
              alert('trigger was '+t.id+'\naction was save');
            },
            'delete': function(t) {
              alert('trigger was '+t.id+'\naction was delete');
            }
          }
    });
    //所有html元素id为demo2的绑定此右键菜单
    $('#demo2').contextmenu('mymenu2', {
      //菜单样式
      menustyle: {
        border: '2px solid #000'
      },
      //菜单项样式
      itemstyle: {
        fontfamily : 'verdana',
        backgroundcolor : 'green',
        color: 'white',
        border: 'none',
        padding: '1px'
      },
      //菜单项鼠标放在上面样式
      itemhoverstyle: {
        color: 'blue',
        backgroundcolor: 'red',
        border: 'none'
      },
      //事件   
      bindings:
          {
            'item_1': function(t) {
              alert('trigger was '+t.id+'\naction was item_1');
            },
            'item_2': function(t) {
              alert('trigger was '+t.id+'\naction was item_2');
            },
            'item_3': function(t) {
              alert('trigger was '+t.id+'\naction was item_3');
            },
            'item_4': function(t) {
              alert('trigger was '+t.id+'\naction was item_4');
            }
          }
    });
    //所有p标签class为demo3的绑定此右键菜单
    $('p.demo3').contextmenu('mymenu3', {
    //重写oncontextmenu和onshowmenu事件
      oncontextmenu: function(e) {
        if ($(e.target).attr('id') == 'dontshow') return false;
        else return true;
      },
      onshowmenu: function(e, menu) {
        if ($(e.target).attr('id') == 'showone') {
          $('#item_2, #item_3', menu).remove();
        }
        return menu;
      }
    });
 </script>
</html>

 

效果图:

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

 

很好玩很炫酷的功能吧,小伙伴们自己美化下,加入到自己的项目中去吧