<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript"
src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
src="Scripts/jquery.contextMenu.js"></script>
<link href="Styles/jquery.contextMenu.css"
type="text/css"
rel="Stylesheet"
/>
<style type="text/css">
BODY, HTML
{
padding: 0px;
margin: 0px;
}
BODY
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background: #FFF;
padding: 15px;
}
H1
{
font-family: Georgia, serif;
font-size: 20px;
font-weight: normal;
}
H2
{
font-family: Georgia, serif;
font-size: 16px;
font-weight: normal;
margin: 0px 0px 10px 0px;
}
#myDiv
{
width: 150px;
border: solid 1px #2AA7DE;
background: #6CC8EF;
text-align: center;
padding: 4em .5em;
margin: 1em;
float: left;
}
#myList
{
margin: 1em;
float: left;
}
#myList UL
{
padding: 0px;
margin: 0em 1em;
}
#myList LI
{
width: 100px;
border: solid 1px #2AA7DE;
background: #6CC8EF;
padding: 5px 5px;
margin: 2px 0px;
list-style: none;
}
#options
{
clear: left;
}
#options INPUT
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 150px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
// Show menu when #myDiv is clicked
$("#myDiv").contextMenu({
menu: 'myMenu'
},
function (action, el, pos) {
// alert(
// 'Action: ' +
action + '\n\n' +
// 'Element ID:
' + $(el).attr('id') + '\n\n' +
// 'X: ' + pos.x
+ ' Y: ' + pos.y + ' (relative to
element)\n\n' +
// 'X: ' +
pos.docX + ' Y: ' + pos.docY + '
(relative to document)'
// );
alert('You are
selected: ' + action);
});
// Show menu when a list item is clicked
// $("#myList UL
LI").contextMenu({
// menu: 'myMenu'
// }, function (action, el, pos) {
// alert(
// 'Action:
' + action + '\n\n' +
// 'Element text: ' +
$(el).text() + '\n\n' +
// 'X:
' + pos.x + ' Y: ' + pos.y + ' (relative
to element)\n\n' +
// 'X:
' + pos.docX + ' Y: ' + pos.docY + '
(relative to document)'
// );
// });
// Disable menus
$("#disableMenus").click(function () {
$('#myDiv, #myList UL LI').disableContextMenu();
$(this).attr('disabled',
true);
$("#enableMenus").attr('disabled', false);
});
// Enable menus
$("#enableMenus").click(function () {
$('#myDiv, #myList UL LI').enableContextMenu();
$(this).attr('disabled',
true);
$("#disableMenus").attr('disabled', false);
});
// Disable Sachin/AMIR
$("#disableItems").click(function () {
$('#myMenu').disableContextMenuItems('#Player,#Actor');
$(this).attr('disabled',
true);
$("#enableItems").attr('disabled', false);
});
// Enable Sachin/AMIR
$("#enableItems").click(function () {
$('#myMenu').enableContextMenuItems('#Player,#Actor');
$(this).attr('disabled',
true);
$("#disableItems").attr('disabled', false);
});
});
</script>
</head>
<body>
<form id="form1">
<div id="myDiv">
Right
click to view the context menu
</div>
<div id="options">
<p>
<input type="button"
id="disableItems"
value="Disable
Sachin/AMIR" />
<input type="button"
id="enableItems"
value="Enable
Sachin/AMIR" disabled="disabled" />
</p>
<p>
<input type="button"
id="disableMenus"
value="Disable
Context Menus" />
<input type="button"
id="enableMenus"
value="Enable
Context Menus" disabled="disabled" />
</p>
</div>
<ul id="myMenu" class="contextMenu">
<li class="edit"><a href="#Country">India</a></li>
<li class="cut
separator"><a href="#Player">Sachin</a></li>
<li class="copy"><a href="#Actor">AMIR</a></li>
<li class="paste
separator"><a href="#Developer">Praveen</a></li>
</ul>
</form>
</body>
</html>