jQuery右键菜单插件contextmenu.js

所属分类:其他-独立的部件

 47657  314  查看评论 (4)
分享到微信朋友圈
X
jQuery右键菜单插件contextmenu.js ie兼容6

使用方法

第一步 将jquery-1.4.4.min.js,jquery.contextmenu.r2.js拷贝到你的项目中

第二步 在需要右键菜单的页面引入 两个js

<script  src="jquery-1.4.4.min.js"></script>
<script src="jquery.contextmenu.r2.js"></script>

第三步添加右键菜单项,例如:

<div id="demo2"> 右键点此</div>
<!--以下就是右键demo2后弹出的菜单项-->
<div 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>
</div>

第四步绑定此右键菜单,例如:

$('#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');
        }
    }
})

相关插件-独立的部件

jQuery二维码生成插件qrcode.js

应用小工具二维码生成
  独立的部件
 40778  477

html5读取二维码

手机端web调用摄像头读取解析二维码
  独立的部件
 63476  434

操作浏览器标题栏插件Title.js

Title.js是一个javascript库用来操作浏览器标题栏,没有依赖性。 这里有用法示例:添加前缀,加后缀,改变预定义的标题,招牌效果、打字机效果。
  独立的部件
 44050  359

jQuery分享插件jquery.share.js

jQuery分享插件jquery.share.js享到QQ、微信、微博、google、in、tweeter等
  独立的部件
 117495  639

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    0
    2018/5/7 17:30:27
    mac上的火狐浏览器不兼容,求解 回复
    黑色的夜 0
    2017/11/5 16:17:59

    前面说错了,前面说错了,抱歉!。。。。应该是修改成: 

    $(document).on('contextmenu',$(this).selector, function(e) {
        黑色的夜1
        2017/11/5 16:20:22

        修改jquery.contextmenu.r2.js的81行代码修改,这个样子的话append后的代码才可以有右键功能!!!

    回复
    hbgf619 0
    2017/9/28 8:22:44

    不错,待会试试看

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复