最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

3种不同的ContextMenu右键演示

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-09 22:37浏览(1618)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示 下载资源 下载积分: 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; 
    } 
});
标签: contextmenu右键
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/109.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    10-19 09:50
    qq562140910
    有积分吗?+5+5
  • 头像 沙发
    10-18 11:45
    qq562140910
    有积分吗?+5
1 2