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