JS实现不使用图片仿Windows右键菜单效果代码
更新时间：2015年10月23日 11:37 点击：2855
本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考，具体如下：
这里演示JS不使用图片仿Windows右键菜单效果，这款代码灵活使用了文鼎字，配合CSS和JS做出了这个和系统右键菜单很相似的东东。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/
具体代码如下：
<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><!-- function RightMenu() { this.AddExtendMenu=AddExtendMenu; this.AddItem=AddItem; this.GetMenu=GetMenu; this.HideAll=HideAll; this.I_OnMouseOver=I_OnMouseOver; this.I_OnMouseOut=I_OnMouseOut; this.I_OnMouseUp=I_OnMouseUp; this.P_OnMouseOver=P_OnMouseOver; this.P_OnMouseOut=P_OnMouseOut; A_rbpm = new Array(); HTMLstr = ""; HTMLstr += "<!-- RightButton PopMenu -->/n"; HTMLstr += "/n"; HTMLstr += "<!-- PopMenu Starts -->/n"; HTMLstr += "<div id='E_rbpm' class='rm_div'>/n"; 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>娃海作制"; HTMLstr += "</td><td height='264' width='120' style='padding: 1' valign='bottom'>/n"; HTMLstr += "<table width='100%' border='0' cellspacing='0'>/n"; HTMLstr += "<!-- Insert A Extend Menu or Item On Here For E_rbpm -->/n"; HTMLstr += "</table></td></tr></table>/n"; HTMLstr += "</div>/n"; HTMLstr += "<!-- Insert A Extend_Menu Area on Here For E_rbpm -->"; HTMLstr += "/n"; HTMLstr += "<!-- PopMenu Ends -->/n"; } function AddExtendMenu(id,img,wh,name,parent) { var TempStr = ""; eval("A_"+parent+".length++"); eval("A_"+parent+"[A_"+parent+".length-1] = id"); TempStr += "<div id='E_"+id+"' class='rm_div'>/n"; TempStr += "<table width='100%' border='0' cellspacing='0'>/n"; TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+id+" -->"; TempStr += "</table>/n"; TempStr += "</div>/n"; TempStr += "<!-- Insert A Extend_Menu Area on Here For E_"+id+" -->"; TempStr += "<!-- Insert A Extend_Menu Area on Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace("<!-- Insert A Extend_Menu Area on Here For E_"+parent+" -->",TempStr); eval("A_"+id+" = new Array()"); TempStr = ""; TempStr += "<!-- Extend Item : P_"+id+" -->/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+" </td><td style='font-family: webdings; text-align: ;'>4"; TempStr += "</td></tr>/n"; TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr); } function AddItem(id,img,wh,name,parent,location) { var TempStr = ""; var ItemStr = "<!-- ITEM : I_"+id+" -->"; 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 += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",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 += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",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(){alert("帮助")} --> </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> <!-- var menu = new RightMenu();menu.AddItem("update","start_update","4","<font class=w2kfont>Web Update</font>","rbpm","http://baidu.com/");menu.AddItem("suan","suan","a","鱼米之乡","rbpm","http://baidu.com");menu.AddItem("sperator","","","","rbpm",null);menu.AddExtendMenu("program","start_pro","24","程序<font class=w2kfont>(<u>P</u>)</font>","rbpm",null);menu.AddExtendMenu("p_acc","folder","+","附件","program",null);menu.AddItem("p_acc1","html","+","<font class=w2kfont>Microsoft FrontPage 2000</font>","program","51w/");menu.AddItem("p_acc2","html","+","<font class=w2kfont>Norton AntiVirus Corporate Edition</font>","program","http://baidu.com");menu.AddExtendMenu("p_lgame","folder","16","小游戏","p_acc",null);menu.AddItem("p_game1","folder","+","扫雷","p_lgame","http://baidu.com/");menu.AddItem("p_game2","folder","+","超级玛力","p_lgame","http://baidu.com/");menu.AddExtendMenu("doc","start_doc","24","文档<font class=w2kfont>(<u>D</u>)</font>","rbpm",null);menu.AddItem("d_photo","folder","+","官方博客","doc",null);menu.AddExtendMenu("fav","start_fav","24","收藏<font class=w2kfont>(<u>A</u>)</font>","rbpm",null);menu.AddExtendMenu("f_bbs","folder","16","论坛","fav",null);menu.AddItem("f_bbs2","html","+","百度搜索","f_bbs","http://baidu.com/");menu.AddItem("f_bbs3","html","+","源码爱好者","f_bbs","http://www.jb51.net/");menu.AddExtendMenu("f_webpage","folder","16","网页制作","fav",null);menu.AddItem("f_webpage1","html","","<font disabled>(空)</font>","f_webpage","http://baidu.com");menu.AddExtendMenu("f_study","folder","16","网上学习","fav",null);menu.AddItem("f_s1","html","","<font disabled>(空)</font>","f_study","http://matrix.hongen.com/forum/");menu.AddExtendMenu("f_link","folder","16","友情链接","fav",null);menu.AddItem("f_link1","html","+","CodeFans.net","f_link","http://baidu.com");menu.AddExtendMenu("setting","start_set","24","设置<font class=w2kfont>(<u>S</u>)</font>","rbpm",null);menu.AddItem("s_panel","folder","+","控制面板(C)","setting","http://baidu.com");menu.AddItem("sperator","","","","setting",null);menu.AddItem("s_data","s_user","+","用户资料(D)","setting","http://baidu.com");menu.AddItem("s_display1","s_taskbar","+","任务栏和开始菜单(T)","setting","http://baidu.com");menu.AddExtendMenu("find","start_find","24","查找<font class=w2kfont>(<u>F</u>)","rbpm",null);menu.AddItem("l_search","search","4","文件或文件夹上(<u>F</u>)...","find","http://baidu.com");menu.AddItem("u_search","f_user","4","用户(<u>P</u>)...","find","http://baidu.com");menu.AddItem("help","start_help","V"," 帮助<font class=w2kfont>(<u>H</u>)</font>","rbpm",null);menu.AddItem("sperator","","","","rbpm",null);menu.AddItem("logoff","start_logoff","v"," 注销<font class=w2kfont>(<u>L</u>)</font>","rbpm",null);menu.AddItem("shut","start_shut","x","退出<font class=w2kfont>(<u>U</u>)</font>","rbpm",null);document.writeln(menu.GetMenu());--></SCRIPT></TD></TR></TABLE></BODY></HTML>希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
- VPN可以虚拟出一个专用网络，让远处的计算机和你相当于处在同一个局域网中，而中间的数据也可以实现加密传输，用处很大，特别是在一些大公司，分公司处在不同的区域。...2016-01-27
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23
- 这篇文章主要介绍了Windows批量搜索并复制/剪切文件的批处理程序实例,需要的朋友可以参考下...2020-06-30
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21
- 这篇文章主要为大家详细介绍了C#创建一个简单windows窗体应用的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考，具体如下：这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码，相当不错，因考虑功能的实现，所以没有怎么美化，不过这样也好，可以给大家更...2015-10-21
- 本文实例讲述了jQuery实现可关闭固定于底（顶）部的工具条菜单效果。分享给大家供大家参考，具体如下：这是一款可关闭始终在页面底部的工具条菜单，浮动在页面顶部的大家见的比较多了，本款从形式上来说与其它的没什么差别，只是浮...2015-11-08
- 这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-09
- 二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果：当选择大类时，小类下拉框里的选项内容也随着改...2015-10-30
- 这篇文章主要介绍了Powershell 查询 Windows 日志的方法,需要的朋友可以参考下...2020-06-30
- 这篇文章主要介绍了C#实现windows form限制文本框输入的方法,涉及C#限制文本框输入的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧...2017-01-09
- 由于业务需要，要求实现树形菜单，且菜单数据由后台返回，下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
- 这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单，有加载等待效果，有层级分类展示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht...2015-03-15
- 这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-23
- 本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考，具体如下：这里演示JS不使用图片仿Windows右键菜单效果，这款代码灵活使用了文鼎字，配合CSS和JS做出了这个和系统右键菜单很相似的东东。...2015-10-23
C# Windows API应用之基于GetDesktopWindow获得桌面所有窗口句柄的方法
这篇文章主要介绍了C# Windows API应用之基于GetDesktopWindow获得桌面所有窗口句柄的方法,结合实例形式分析了GetDesktopWindow函数用于获取窗口句柄的具体使用方法与相关注意事项,需要的朋友可以参考下...2020-06-25- 作为一个新生事物，Linux吸引了不少眼球，但是它能否快捷、方便地与Windows资源共享，是一个很重要的问题。大家知道，Windows之间可以利用“网络邻居”来实现资源共享，而Linux...2016-11-25
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
首先是数据库的设计。分类表叫cate.我做的是分类数据的二级联动，数据需要的字段有：id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级，则父id为0，若有上级，则父id为上一级的id。数据库有内容后，就可以开始写代码，进...2014-05-31