<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ContextMenu plugin</title>
<link rel="stylesheet" type="text/css" href="http://www.trendskitchens.co.nz/jquery/contextmenu/page_style.css" />
<script type="text/javascript" src="http://www.trendskitchens.co.nz/jquery/contextmenu/jquery-1.1.3.js"></script>
<script type="text/javascript" src="http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js"></script>
<script type="text/javascript">
$(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>
<body>
<div class="contextMenu" id="myMenu1">
<ul>
<li id="open"><img src="folder.png" /> Open</li>
<li id="email"><img src="email.png" /> Email</li>
<li id="save"><img src="disk.png" /> Save</li>
<li id="delete"><img src="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>
<span class="demo1" id="quickDemo" style="float:right;border: 1px solid #888;">
<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>
<h3> </h3>
<p style="font-weight: bold;">
<span class="demo3" id="dontShow" style="padding: 5px; background-color:pink">Don't show menu</span>
<span class="demo3" id="showOne" style="padding: 5px;background-color:lightgreen">Just first item</span>
<span class="demo3" id="showAll" style="padding: 5px;background-color:lightblue">Show all</span>
</p>
</body>
</html>