<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div.line:hover{
background: yellow;
border-radius: 2px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
/*$(function() {
$("<div><p>Hello</p></div>").appendTo("body");
$('div').css({'border':'1px solid gray','text-align':'center'});
});*/
function rightbt(evt) {
var msgObj=document.getElementById("contextMenu");
document.getElementById("contextMenu").innerHTML="<div class='line'>save</div>"
+"<div class='line'>edit</div>"
+"<div class='line'>delete</div>";
var moveTop = parseInt(evt.clientY);
var moveLeft = parseInt(evt.clientX);
msgObj.style.position='absolute';
msgObj.style.left=moveLeft+ "px";
msgObj.style.top=moveTop+ "px";
msgObj.style.border='1px solid gray';
msgObj.style.width = 60+'px';
msgObj.style.height = 65+'px';
msgObj.style.display = 'block';
$('div.line').css({"line-height":"20px","font-size":14,"font-weight":"bold"});
if (document.getElementsByClassName('line')) {
$('div.line').live('click', function() {
msgObj.style.display = 'none';
});
}
return false;
}
document.oncontextmenu = rightbt;
</script>
</head>
<body>
<div id="contextMenu"></div>
<div id="myMenudiv"></div>
</body>
</html>