Html

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

Javascript

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

Щелкните правой кнопкой мыши.

Html

<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>
<!-- И так далее... -->
</ul>
</div>

Javascript

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

Не показывать меню Только первый пункт Показать все

Html

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

Javascript

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