📄 menu.htm

📁 《XML语言及应用》作者华铨平—examples
💻 HTM
字号:
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style> 
  .menu{ cursor: hand; 
  display: none; 
  position: absolute; 
  top: 0; left: 0; 
  overflow: hidden; 
  background-color: "#CFCFCF"; 
  border: "1 solid"; 
  border-top-color: "#EFEFEF"; 
  border-left-color: "#EFEFEF"; 
  border-right-color: "#505050"; 
  border-bottom-color: "#505050"; 
  font: 10pt 宋体; 
  margin:0pt;padding: 2pt 
  } 
   
  .menu SPAN {width: 100%; cursor: hand; padding-left: 10pt} 
  .menu SPAN.selected {background: navy; color:white; cursor: hand} 
</style> 
   
<xml id="contextDef"> 
  <xmldata> 
  <contextmenu id="demo"> 
  <item id="viewsource" value="查看源文件"/> 
  <item id="back" value="后退……"/> 
  <item id="meng" value="访问【孟宪会之精彩世界】"/> 
  <item id="calculate" value="执行 JavaScript 代码"/> 
  </contextmenu> 
  <contextmenu id="demob"> 
  <item id="菜单项例子1" value="菜单项例子1" /> 
  <item id="菜单项例子2" value="菜单项例子2" /> 
  </contextmenu> 
  </xmldata> 
</xml> 
   
<SCRIPT> 
  // 定义全局变量 
  var bContextKey=false; 
   
  function fnGetContextID(el) { 
	  while (el!=null) { 
		  if (el.contextmenu) return el.contextmenu 
		  el = el.parentElement 
	  } 
	  return "" 
  } 
   
  function fnDetermine(){ 
	  oWorkItem=event.srcElement; 
   
	  //键盘上的菜单键被按下时。 
	  if(bContextKey==true){ 
   
		  //如果菜单的“状态”为“false” 
		  if(oContextMenu.getAttribute("status")=="false"){ 
   
			  //捕获鼠标事件，以便和页面交互。 
			  oContextMenu.setCapture(); 
   
			  //根据鼠标位置，确定菜单位置。 
			  oContextMenu.style.top =event.clientY + document.body.scrollTop +  1; 
			  oContextMenu.style.left=event.clientX + document.body.scrollLeft +  1; 
			  oContextMenu.innerHTML =""; 
   
			  //设定菜单的“状态”为“true” 
			  var sContext = fnGetContextID(event.srcElement) 
			  if (sContext!="") { 
				  fnPopulate(sContext) 
				  oContextMenu.setAttribute("status","true"); 
				  event.returnValue=false; 
			  } 
			  else 
				  event.returnValue=true 
		  } 
		} 
		else{ 
   
			  // 如果键盘菜单键没有按下，并且菜单的“状态”为“true”。 
			  if(oContextMenu.getAttribute("status")=="true"){ 
				  if((oWorkItem.parentElement.id=="oContextMenu") && (oWorkItem.getAttribute("component")=="menuitem")){ 
					  fnFireContext(oWorkItem) 
				  } 
   
				  // 当鼠标离开菜单或单击菜单项后，重设菜单（隐藏） 
   
				  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 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=120; 
	  oContextMenu.style.height=document.body.offsetHeight/2; 
	  oContextMenu.style.zIndex=2; 
   
	  //设置菜单样式 
	  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; 
  } 
   
  function javameng(){ 
	  window.open("http://lucky.myrice.com","_blank","width=400,height=400,top=20,left=20") 
  } 
   
  function fnFireContext(oItem) { 
	  // 自定义上下文菜单项的功能 
	  switch (oItem.menuid) { 
	  case "viewsource": 
		  location.href = "view-source:" + location.href 
		  break; 
	  case "back": 
		  history.back() 
		  break; 
	  case "meng": 
		  location.href="http://lucky.myrice.com" 
		  break; 
	  case "calculate": 
		  javameng() 
		  break; 
	  default: 
		  alert("你点击的菜单项是:\n\n\n" + oItem.menuid +"啊！！！") 
	  } 
  } 
  </SCRIPT> 
   
  <BODY onload="fnInit()" onclick="fnDetermine()" bgcolor="#ccffcc"> 
  <div status="false" onmouseover="fnChirpOn()" onmouseout="fnChirpOff()" id="oContextMenu" class="menu">
  </div>
        fdfsdfdsfdsfd这里放你任意的其他的东西！ .
  <P contextmenu="demo">这里是利用上下文菜单的里子！你把鼠标移动到这里，然后单击鼠标又键，可以看到菜单内容！
  </p>
  <p>你也可以把鼠标放到下面的图象上面，点击又键！<p> 
  <center>
  <IMG SRC="http://lucky.myrice.com/javabk1.jpg"　　 
  contextmenu="demob"/> 
  </center>
  
  </body> 
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -