jQuery右键菜单插件contextmenu.js

查看演示立即下载

插件描述：jQuery右键链接弹出下拉菜单

使用方法

第一步将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');
        }
    }
})

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：轻量级倒计时插件leftTime.js
下一个特效：基于bootstrap的双边栏选择框