3种不同的ContextMenu右键演示

ContextMenu是一款功能非常丰富的右键菜单插件，它可以在一个页面中使用多个右键菜单或被绑定到多个元素上。

分类：悬浮层/弹出层 > 弹窗难易：初级

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先我们放置三个右键弹出层：

<div class="contextMenu" id="myMenu1">
    <ul>
        <li id="open"><img src="images/folder.png" /> Open</li>
        <li id="email"><img src="images/email.png" /> Email</li>
        <li id="save"><img src="images/disk.png" /> Save</li>
        <li id="delete"><img src="images/cross.png" /> Delete</li>
    </ul>
</div>

<div class="contextMenu" id="myMenu2">
    <ul>
        <li id="item_1">Item 1</li>
        <li id="item_2">Item 2</li>
        <li id="item_3">Item 3</li>
        <li id="item_4">Item 4</li>
        <li id="item_5">Item 5</li>
        <li id="item_6">Item 6</li>
        <li id="item_7">Item 7</li>
        <li id="item_8">Item 8</li>
    </ul>
</div>

<div class="contextMenu" id="myMenu3">
    <ul>
        <li id="item_1">Item 1</li>
        <li id="item_2">Item 2</li>
        <li id="item_3">Item 3</li>
    </ul>
</div>

接着我们放置三个操作弹出层的右键按钮：

<p class="demo1"><b>演示</b> 右键单击我的! !</p>
<p class="demo2">在这个段落里面右键点击触发菜单</p>
<p style="font-weight: bold;">
    <span class="demo3" id="dontShow" style="padding: 5px; background-color:pink">不显示菜单</span>
    <span class="demo3" id="showOne" style="padding: 5px;background-color:lightgreen">显示第一项</span>
    <span class="demo3" id="showAll" style="padding: 5px;background-color:lightblue">全部显示</span>
</p>

jQuery

演示一：class为demo1的样式绑定此右键菜单

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

演示二：class为demo2的样式绑定此右键菜单

$('.demo2').contextMenu('myMenu2', {
    menuStyle: { //菜单样式
        border: '2px solid #000'
    },
    itemStyle: { //菜单项样式
        fontFamily: 'verdana',
        backgroundColor: '#666',
        color: 'white',
        border: 'none',
        padding: '1px'
    },
    itemHoverStyle: { //菜单项鼠标放在上面样式
        color: '#fff',
        backgroundColor: '#0f0',
        border: 'none'
    }
});

演示三：class为demo3的样式绑定此右键菜单

$('.demo3').contextMenu('myMenu3', {
    onContextMenu: function(e) { //重写onContextMenu
        if ($(e.target).attr('id') == 'dontShow') return false;
        else return true;
    },
    onShowMenu: function(e, menu) { //重写onShowMenu事件，单独对id=showOne设置
        if ($(e.target).attr('id') == 'showOne') {
            $('#item_2, #item_3', menu).remove();
        }
        return menu;
    }
});