CoolµÄÓÒ¼ü²Ëµ¥

CoolµÄÓÒ¼ü²Ëµ¥

ÌáÊ¾:ÊÔÊÔ°´ÏÂÊó±êÓÒ¼ü.

.½«ÏÂÃæµÄ´úÂë¸´ÖÆµ½ <body> »òÕß <head> ÄÚ

<style>
 .menu{cursor: default; display: none; cursor: hand; position: absol "1 solid"; 
border-top-color: "#EFEFEF"; border-left-color: "#EFEFEF"; 
border-right-color: "#505050"; border-bottom-color: "#505050"; 
font-size: 8pt; font-family: Arial;margin:0pt;padding: 3pt;overflow: hidden;}
 .menu SPAN {width: 100%; cursor: default;padding-left: 10pt}
 .menu SPAN.selected {background: navy; color:white}
</style>
<xml id="contextDef">
<xmldata>ute; top: 
0; left: 0; background-color: "#CFCFCF"; border:
<contextmenu id="demo">
<item id="viewsource" value="View Source"/>
<item id="back" value="Back..."/>
</contextmenu>
<contextmenu id="demob">
<item id="menu6" value="item6" />
<item id="menu8" value="item7" />
</contextmenu>
</xmldata>
</xml>
<script>
// Define global script variables
var bContextKey=false;
// The fnDetermine function performs most of the work
function fnGetContextID(el) {
  while (el!=null) {
  if (el.contextmenu) return el.contextmenu
  el = el.parentElement
  }
  return ""
  }
function fnDetermine(){
  oWorkItem=event.srcElement;
 // Proceed if the desired keyboard key is pressed.
  if(bContextKey==true){
  // If the menu STATUS is false, continue.
  if(oContextMenu.getAttribute("status")=="false"){
  // Give the menu mouse capture so it can interact better with the page.
  oContextMenu.setCapture();
 // Relocate the menu to an offset from the mouse position.
  oContextMenu.style.top=event.clientY + document.body.scrollTop + 1;
  oContextMenu.style.left=event.clientX + document.body.scrollLeft + 1;
 oContextMenu.innerHTML="";
  // Set its STATUS to true.
  var sContext = fnGetContextID(event.srcElement)
  if (sContext!="") {
  fnPopulate(sContext)
  oContextMenu.setAttribute("status","true");
  event.returnValue=false;
  }
  else
  event.returnValue=true
  }
  }
  else{
  // If the keyboard key was not pressed and the menu status is true, continue.
  if(oContextMenu.getAttribute("status")=="true"){
  // If the object that was clicked has the menu for a parent and it has a COMPONENT 
  attribute equal to "menuitem", continue.
  if((oWorkItem.parentElement.id=="oContextMenu")&&(oWorkItem.getAttribute("component")=="menuitem")){
  fnFireContext(oWorkItem)
  }
 // Reset the context menu, release mouse capture, and hide it. 
  oContextMenu.style.display="none";
  oContextMenu.setAttribute("status","false");
  oContextMenu.releaseCapture();
  oContextMenu.innerHTML="";
  event.returnValue=false;
  }
  }
  }

function fnPopulate(sID) {
  var str=""
  var elMenuRoot = document.all.contextDef.XMLDocument.childNodes(0).selectSingleNode('contextmenu[@id="' 
  + sID + '"]')
  if (elMenuRoot) {
  for(var i=0;i<elMenuRoot.childNodes.length;i++)
  str+='<span component="menuitem" menuid="' + elMenuRoot.childNodes[i].getAttribute("id") 
  + '" id=oMenuItem' + i + '>' + elMenuRoot.childNodes[i].getAttribute("value") 
  + "</SPAN><BR>"
  oContextMenu.innerHTML=str;
  oContextMenu.style.display="block";
  oContextMenu.style.pixelHeight = oContextMenu.scrollHeight 
  }
  }
function fnFireContext(oItem) {
  switch (oItem.menuid) {
  case "viewsource":
  location.href = "view-source:" + location.href
  break;
  case "back":
  history.back()
  break;
  default:
  alert("You Selected:\nID: " + oItem.menuid + "\nText: " 
  + oItem.innerText)
  }
  }
/* The chirp functions provide visual appeal. Notice that they are specific 
  about only changing styles while the mouse is within the client window. This 
  is because setCapture allows the mouse to pick up coordinate values on the window 
  (not the user's screen) and this can throw an error if you try to get a property 
  from an object that isn't recognized. */
  function fnChirpOn(){
  if((event.clientX>0)&&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight)){
  oWorkItem=event.srcElement;
  if(oWorkItem.getAttribute("component")=="menuitem"){
  oWorkItem.className = "selected"
  }
  }
  }
  function fnChirpOff(){
  if((event.clientX>0)&&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight)){
  oWorkItem=event.srcElement;
  if(oWorkItem.getAttribute("component")=="menuitem"){
  oWorkItem.className = ""
  }
  }
  }
function fnInit(){
  if (oContextMenu) {
  oContextMenu.style.width=110;
  oContextMenu.style.height=document.body.offsetHeight/2;
  oContextMenu.style.zIndex=2;
  // Setup the basic styles of the context menu.
  document.oncontextmenu=fnSuppress;
  }
  }
function fnInContext(el) {
  while (el!=null) {
  if (el.id=="oContextMenu") return true
  el = el.offsetParent
  }
  return false
  }
function fnSuppress(){
  if (!(fnInContext(event.srcElement))) { 
  oContextMenu.style.display="none";
  oContextMenu.setAttribute("status","false");
  oContextMenu.releaseCapture();
  bContextKey=true;
  }
 fnDetermine();
  bContextKey=false;
  }
  window.onload = fnInit;
  document.onclick = fnDetermine;
  </script>

ÐÞ¸Ä<body>¼ÓÈë contextmenu=demo Èç±¾Ò³ÐÞ¸ÄÎª <body contextmenu=demo>

ÔÚ<body>ºó¼ÓÈ<<div status="false" onmouseover="fnChirpOn()" onmouseout="fnChirpOff()" id="oContextMenu" class="menu"></div>

Äã¿ÉÒÔÅäÖÃ×Ô¼ºµÄ²Ëµ¥ÄÚÈÝ£¬ÐÞ¸ÄµÚÒ»²½ÖÐµÄÈçÏÂÄÚÈÝ×¢Òâ´ÖÌå×Ö£¬ºìÉ«×ÖÌåÊÇÎÒÄ£Äâ¼ÓÈëÒ»¸öÐÂÑ¡Ôñ£¬Äã¿É¸ú×ÅÊÔÊÔ¡£
<xml id="contextDef">
<xmldata>
<contextmenu id="demo">//ÓëµÚ¶þ²½ÊÇ¶ÔÓ¦µÄ
<item id="viewsource" value="²é¿´Ô´´úÂë"/>
<item id="back" value="ºóÍË"/>
<item id="location" value="µ±Ç°Â·¾¶"/>
</contextmenu>
</xmldata>
</xml>

ÏÂÃæÕâÊÇ¶ÔÓ¦ÏàÓ¦µÄÃüÁî²Ù×÷µÄ.
function fnFireContext(oItem) {
switch (oItem.menuid) {
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
case "location":
alert(document.location);
break;
default:
alert("You Selected:\nID: " + oItem.menuid + "\nText: " + oItem.innerText)
}
}

Äã¿ÉÒÔ¼ÓÈë¸ü¶àµÄ¶«Î÷µ½ÄÚÃæ£¬ÈçÍ¼Æ¬Ö®ÀàµÄ£¬¿ÉÒÔÊÔÊÔ¿´¿´ÎÒÂÛÌ³ÖÐÔÄ¶ÁÌû×ÓÊ±µÄÓÒ¼ü²Ëµ¥£¬ÎÒ×öÁËµãÐÞ¸Ä£¬´ó¼Ò¿ÉÒÔ¿´¿´£¬Í¬ÑùÓÐÊ²Ã´ÎÊÌâ£¬µ½ÂÛÌ³·¢ÎÊ°É:).