<html>
<head>
<style>
.menuItem {
font-family:sans-serif; font-size:12pt;
width:220;padding-left:20;
background-color:menu;
color:black
}
.highlightItem {
font-family:sans-serif; font-size:12pt;
width:220; padding-left:20;
background-Color:highlight; color:white;
}
</style>
</head>
<body oncontextmenu="showMenu(); return false">
<h2>Right Click to Bring Up a Context Menu</h2>
<!-- Context Menu -->
<div id=menu1
onclick="clickMenu()"
onmouseover="toggleMenu()"
onmouseout="toggleMenu()"
style="position:absolute;
display:none;
border: 2px outset black;
width:220;
background-color:menu">
<div class="menuItem"
doFunction="alert(el.innerHTML);">Graph</div>
<hr>
<div class="menuItem"
doFunction="alert(el.innerHTML);">
Show News
</div>
<div class="menuItem"
doFunction="alert(el.innerHTML);">Buy
</div>
<hr>
<div class="menuItem"
doFunction="alert(el.innerHTML);">Sell
</div>
<div class="menuItem"
doFunction="alert(el.innerHTML);">
Refresh Portfolio
</div>
</div>
<!-- End of Context Menu -->
<script>
var el;
function showMenu() {
ContextElement=event.srcElement;
menu1.style.leftPos+=10;
menu1.style.posLeft=event.clientX;
menu1.style.posTop=event.clientY;
menu1.style.display="";
menu1.setCapture();
}
function toggleMenu() {
el=event.srcElement;
if (el.className=="menuItem") {
el.className="highlightItem";
} else if (el.className=="highlightItem") {
el.className="menuItem";
}
}
function clickMenu() {
menu1.releaseCapture();
menu1.style.display="none";
el=event.srcElement;
if (el.doFunction != null) {
eval(el.doFunction);
}
}
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar