jquery 右键弹出菜单

来源：互联网发布：平胸知乎编辑：程序博客网时间：2024/05/11 17:06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>ContextMenu plugin</title>

$(document).ready(function() {

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

}

});

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

}

});

$('span.demo3').contextMenu('myMenu3', {

onContextMenu: function(e) {

if ($(e.target).attr('id') == 'dontShow') return false;

else return true;

onShowMenu: function(e, menu) {

if ($(e.target).attr('id') == 'showOne') {

$('#item_2, #item_3', menu).remove();

}

return menu;

}

});

</script>

</head>

<ul>

<li id="email"><img src="email.png" /> Email</li>

<li id="delete"><img src="cross.png" /> Delete</li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<b>DEMO</b> right-click me!! </span></p>

<p>

<span class="demo1" id="demo1_yellow"><b>RIGHT CLICK FOR DEMO</b></span>

<span class="demo1" id="demo1_green" style="background-color:lightgreen"><b>THIS WORKS TOO</b></span>

</p>

<span class="demo3" id="showOne" style="padding: 5px;background-color:lightgreen">Just first item</span>

</p>

</body>

</html>