jQuery右键链接弹出下拉菜单

最新推荐文章于 2021-06-17 11:42:45 发布

Ysiqiqi

最新推荐文章于 2021-06-17 11:42:45 发布

阅读量515

点赞数

本文介绍了一个基于jQuery的右键菜单插件contextmenu.js，该插件允许为网页元素添加自定义的右键菜单，并提供了详细的配置示例，包括菜单样式、事件绑定等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery右键菜单插件contextmenu.js

HTML:

<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>

JS:

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

        }

    }

})