<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-1.4.3.js" type="text/javascript"></script>
<script type="text/javascript" src="script/jquery.contextmenu.r2.packed.js"></script>
<style type="text/css">
table
{
width:500px;
height:400px
}
</style>
<script type="text/javascript">
$(function () {
$("tr").mousemove(function () {
$("#hide1").val($(this).attr("id"));
$("#trid").html($(this).attr("id"));
});
$("td").mousemove(function () {
$("#tdid").html($(this).attr("id"));
});
$('p').contextMenu('myMenu1', {
bindings: {
'factory': function (t) {
},
'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');
}
}
});
})
</script>
</head>
<body>
<div class="contextMenu" id="myMenu1">
<ul>
<li id="factory"><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="close"><img src="cross.png" /> Close</li>
</ul>
</div>
<table >
<thead>
<tr>
<td ></td>
<td > </td>
</tr>
</thead>
<tbody>
<tr id="1">
<td id="11"> 1</td>
<td id="12">2</td>
</tr>
<tr id="2">
<td id="21"> 3</td>
<td id="22">4 </td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<input id="hide1" type="hidden" value="" />
tr:<p id="trid"></p>
td:<p id="tdid"></p>
</body>
</html>