类似Windows开始菜单的右键菜单

最新推荐文章于 2022-04-06 09:44:02 发布

原创最新推荐文章于 2022-04-06 09:44:02 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#windows #function #insert #null #class #menu

JavaScript 专栏收录该内容

136 篇文章

订阅专栏

该博客提供了一段实现右键菜单的代码。运用HTML进行页面结构搭建，JScript编写功能函数，如添加菜单项、扩展菜单等。代码中定义了菜单样式，包含不同菜单项的添加和操作，可实现右键弹出菜单及相关功能。

代码如下：
<HTML><HEAD><TITLE>右键菜单</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <STYLE type=text/css>BODY { FONT-SIZE: 12px; } .info{FONT-SIZE: 14px;color:#FFFFFF;font-family:@Tahoma,@宋体;width:20px} TABLE { CURSOR: default; FONT-SIZE: 12px; MARGIN: 0px } TR { HEIGHT: 20px } TR.over { BACKGROUND-COLOR: #000080; COLOR: #ffffff; CURSOR: default; FONT-SIZE: 12px } TR.out { BACKGROUND-COLOR: #efefef; COLOR: #000000; FONT-SIZE: 12px } DIV.rm_div { BACKGROUND-COLOR: #efefef; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; DISPLAY: none; FILTER: Alpha(Opacity='95'); HEIGHT: 0px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; WIDTH: 0px } HR.sperator { BORDER-BOTTOM: #ffffff 1px inset; BORDER-LEFT: #ffffff 1px inset; BORDER-RIGHT: #ffffff 1px inset; BORDER-TOP: #ffffff 1px inset; WIDTH: 95% } .w2kfont { FONT-FAMILY: Tahoma; FONT-SIZE: 8pt } </STYLE> <SCRIPT language=JScript> /n"; HTMLstr += "/n"; HTMLstr += "/n"; HTMLstr += "<div id='E_rbpm' class='rm_div'>/n"; // rbpm = right button pop menu HTMLstr += "<table width='100%' border='0' cellspacing='0'>/n"; HTMLstr += "<tr><td height='264' width='20' valign='bottom' bgcolor='#000000' onclick=window.event.cancelBubble=true; class=info>某某制作<br>:<br>某某网站/n"; HTMLstr += "</td><td height='264' width='120' style='padding: 1' valign='bottom'>/n"; HTMLstr += "<table width='100%' border='0' cellspacing='0'>/n"; HTMLstr += "/n"; HTMLstr += "</table></td></tr></table>/n"; HTMLstr += "</div>/n"; HTMLstr += ""; HTMLstr += "/n"; HTMLstr += "/n"; } function AddExtendMenu(id,img,wh,name,parent) { var TempStr = ""; eval("A_"+parent+".length++"); eval("A_"+parent+"[A_"+parent+".length-1] = id"); // 将此项注册到父菜单项的ID数组中去 TempStr += "<div id='E_"+id+"' class='rm_div'>/n"; TempStr += "<table width='100%' border='0' cellspacing='0'>/n"; TempStr += ""; TempStr += "</table>/n"; TempStr += "</div>/n"; TempStr += ""; TempStr += ""; HTMLstr = HTMLstr.replace("",TempStr); eval("A_"+id+" = new Array()"); TempStr = ""; TempStr += "/n"; TempStr += "<tr id='P_"+id+"' class='out'"; TempStr += " onmouseover='P_OnMouseOver(/""+id+"/",/""+parent+"/")'"; TempStr += " onmouseout='P_OnMouseOut(/""+id+"/",/""+parent+"/")'"; TempStr += " onmouseup=window.event.cancelBubble=true;"; TempStr += " onclick=window.event.cancelBubble=true;"; TempStr += "><td nowrap>"; TempStr += "<font face='Wingdings' style='font-size:18px'>0</font> "+name+" &nbsp</td><td style='font-family: webdings; text-align: ;'>4"; TempStr += "</td></tr>/n"; TempStr += ""; HTMLstr = HTMLstr.replace("",TempStr); } function AddItem(id,img,wh,name,parent,location) { var TempStr = ""; var ItemStr = ""; if(id == "sperator") { TempStr += ItemStr+"/n"; TempStr += "<tr class='out' onclick='window.event.cancelBubble=true;' onmouseup='window.event.cancelBubble=true;'><td colspan='2' height='1'><hr class='sperator'></td></tr>"; TempStr += ""; HTMLstr = HTMLstr.replace("",TempStr); return; } if(HTMLstr.indexOf(ItemStr) != -1) { alert("I_"+id+"already exist!"); return; } TempStr += ItemStr+"/n"; TempStr += "<tr id='I_"+id+"' class='out'"; TempStr += " onmouseover='I_OnMouseOver(/""+id+"/",/""+parent+"/")'"; TempStr += " onmouseout='I_OnMouseOut(/""+id+"/")'"; TempStr += " onclick='window.event.cancelBubble=true;'"; if(location == null) TempStr += " onmouseup='I_OnMouseUp(/""+id+"/",/""+parent+"/",null)'"; else TempStr += " onmouseup='I_OnMouseUp(/""+id+"/",/""+parent+"/",/""+location+"/")'"; TempStr += "><td nowrap>"; TempStr +="<font face='Wingdings' style='font-size:18px'>"+wh+"</font> "+ name+" "; TempStr += "</td><td></td></tr>/n"; TempStr += ""; HTMLstr = HTMLstr.replace("",TempStr); } function GetMenu() { return HTMLstr; } function I_OnMouseOver(id,parent) { var Item; if(parent != "rbpm") { var ParentItem; ParentItem = eval("P_"+parent); ParentItem.className="over"; } Item = eval("I_"+id); Item.className="over"; HideAll(parent,1); } function I_OnMouseOut(id) { var Item; Item = eval("I_"+id); Item.className="out"; } function I_OnMouseUp(id,parent,location) { var ParentMenu; window.event.cancelBubble=true; OnClick(); ParentMenu = eval("E_"+parent); ParentMenu.display="none"; if(location == null) eval("Do_"+id+"()"); else window.open(location); } function P_OnMouseOver(id,parent) { var Item; var Extend; var Parent; if(parent != "rbpm") { var ParentItem; ParentItem = eval("P_"+parent); ParentItem.className="over"; } HideAll(parent,1); Item = eval("P_"+id); Extend = eval("E_"+id); Parent = eval("E_"+parent); Item.className="over"; Extend.style.display="block"; Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth-4; if(Extend.style.posLeft+Extend.offsetWidth > document.body.scrollLeft+document.body.clientWidth) Extend.style.posLeft=Extend.style.posLeft-Parent.offsetWidth-Extend.offsetWidth+8; if(Extend.style.posLeft < 0) Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth; Extend.style.posTop=Parent.offsetTop+Item.offsetTop+1; if(Extend.style.posTop+Extend.offsetHeight > document.body.scrollTop+document.body.clientHeight) Extend.style.posTop=document.body.scrollTop+document.body.clientHeight-Extend.offsetHeight; if(Extend.style.posTop < 0) Extend.style.posTop=0; } function P_OnMouseOut(id,parent) { } function HideAll(id,flag) { var Area; var Temp; var i; if(!flag) { Temp = eval("E_"+id); Temp.style.display="none"; } Area = eval("A_"+id); if(Area.length) { for(i=0; i < Area.length; i++) { HideAll(Area[i],0); Temp = eval("E_"+Area[i]); Temp.style.display="none"; Temp = eval("P_"+Area[i]); Temp.className="out"; } } } document.onmouseup=OnMouseUp; document.onclick=OnClick; function OnMouseUp() { if(window.event.button == 2) { var PopMenu; PopMenu = eval("E_rbpm"); HideAll("rbpm",0); PopMenu.style.display="block"; PopMenu.style.posLeft=document.body.scrollLeft+window.event.clientX; PopMenu.style.posTop=document.body.scrollTop+window.event.clientY; if(PopMenu.style.posLeft+PopMenu.offsetWidth > document.body.scrollLeft+document.body.clientWidth) PopMenu.style.posLeft=document.body.scrollLeft+document.body.clientWidth-PopMenu.offsetWidth; if(PopMenu.style.posLeft < 0) PopMenu.style.posLeft=0; if(PopMenu.style.posTop+PopMenu.offsetHeight > document.body.scrollTop+document.body.clientHeight) PopMenu.style.posTop=document.body.scrollTop+document.body.clientHeight-PopMenu.offsetHeight; if(PopMenu.style.posTop < 0) PopMenu.style.posTop=0; } } function OnClick() { HideAll("rbpm",0); } // Add Your Function on following function Do_viewcode(){window.location="view-source:"+window.location.href;} function Do_help(){window.showHelp(window.location);} function Do_exit() {window.close();} function Do_refresh() {window.location.reload();} function Do_back() {history.back();} function Do_forward() {history.forward();} function Do_help(){ var s_help='<style>body,td{font:menu;padding:2}</style>'; s_help+='<title>帮助－www.51windows.Net</title>'; s_help+='<body bgcolor=menu>'; s_help+='<br>　　欢迎光临无忧视窗！本系统和您的Windows系统操作很相似。单击开始，打开开始菜单，双击桌面图标打开相关文件！<span style="color:blue;cursor:hand" onclick=showHelp("windows.chm::/MS-ITS:ntdef.chm::/default.htm")>本机帮助..</span>'; showModalDialog("about:"+s_help+"","","dialogHeight:110px;dialogWidth:210px;help:yes;status:no")} --> </SCRIPT> <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD> <BODY bgColor=#336699 oncontextmenu=window.event.returnValue=false> <DIV id=snwcwt> 请点击右键</DIV> <SCRIPT language=JScript>  </SCRIPT> </TD></TR></TABLE></BODY></HTML>
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]