JS实现不使用图片仿Windows右键菜单效果代码

本文实例讲述了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程序设计有所帮助。

时间: 2015-10-20

基于JS模仿windows文件按名称排序效果

作个记录,主要是对数字的处理,如果数字的前面字符是相同的,则数字以值比较,而不是单个字符之间的比较. function SortLikeWin(v1, v2) { var a = v1.name; var b = v2.name; var reg = /[0-9]+/g; var lista = a.match(reg); var listb = b.match(reg); if (!lista || !listb) { return a.localeCompare(b); } for (var

JS实现仿Windows经典风格的选项卡Tab切换代码

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码.分享给大家供大家参考,具体如下: 这款仿Windows风格的选项卡,带有灰色的立体感,示例内容是用JS控制输出,只是为了演示功能,你在用的时候完全可以去掉的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-windows-style-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

javascript高级的文件目录排序代码

刚写完,欢迎大家帮忙测试 完整的测试代码: 高级目录,文件名排序 #page{} 高级目录,文件名排序 主要实现了目录中的数字按大小排序 排序结果: //accepts a string; returns the string with regex metacharacters escaped. the returned string // can safely be used at any point within a regex to match the provided literal s

JS实现仿Windows7风格的网页右键菜单效果代码

本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS仿Windows7风格的网页右键菜单,可以多级展开的右键菜单,原生JS.可参考性强,学习JavaScript的朋友不可错过.本菜单用户体验极佳,兼容性良好,无jQuery. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/ 具体代码如下: <!DOCTYPE htm

Windows系统下使用Sublime搭建nodejs环境

1.下载nodejs,并安装ok后,配置好环境变量. 2.下载sublime text3 3.在package install 包中新增node插件(或者直接去SublimeText-Nodejs插件(https://github.com/tanepiper/SublimeText-Nodejs)下载,下载之后, 在D:\Program Files\SublimeText3\Data\Packages下新建文件夹为Nodejs文件名不要搞错,然后把git上下载的文件都扔进去) 下载后是Subli

通过node-mysql搭建Windows+Node.js+MySQL环境的教程

前言 MySQL是一款常用的开源数据库产品,通常也是免费数据库的首选.查了一下NPM列表,发现Nodejs有13库可以访问MySQL,felixge/node-mysql似乎是最受关注项目,我也决定尝试用一下. 要注意名字,"felixge/node-mysql"非"node-mysql",安装部分会介绍这个小插曲! 目录 node-mysql介绍 建立MySQL测试库 node-mysql安装 node-mysql使用 1. node-mysql介绍 felixg

JavaScript制作windows经典扫雷小游戏

代码其实很简单,这里就不多废话了 <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>扫雷-JavaScript Mine Sweeper

HTML+JavaScript实现扫雷小游戏

本文实例为大家分享了JavaScript实现扫雷小游戏的具体代码,供大家参考,具体内容如下 工具:Sublime Text / Dreamweaver /Hbuilder <!doctype html> <html> <head> <meta charset="utf-8"> <title>SaoLei</title> <style type="text/css"> table {

C语言实现简易版扫雷小游戏

本文实例为大家分享了C语言实现简易版扫雷的具体代码,供大家参考,具体内容如下 声明 本次扫雷小游戏用多文件来编写.首先,要自定义的一个头文件 mine.h,里面有扫雷程序里面所需要的头文件.常量和所有函数的声明.其次,创建主函数 test.c,用自己喜欢的方式构建一个游戏的框架,最后,创建自定义函数 mine.c,编写各项功能. 设计思路 1.先写主函数,理清整个游戏流程. int main() { int quit = 0; do{ int select = 0; Menu(); scanf(

C++实现简单扫雷小游戏

本文实例为大家分享了C++实现简单扫雷小游戏的具体代码,供大家参考,具体内容如下 头文件Mine_Sweep.h #include <iostream> #include <ctime> #include <cstdlib> #include <algorithm> #include <queue> #include <Windows.h> using namespace std; typedef pair<int, int&g

分享自己用JS做的扫雷小游戏

引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /

C语言实现扫雷小游戏(适合初学者)

扫雷小游戏作为初学c语言的小白有很大的帮助,其中用到了函数的定义,函数的声明,循环语句,数组思想等等知识,对于代码理解和设计代码思路有很大的帮助,本文就详细介绍了代码的各个步骤和运行结果.希望给到和我一样的小白一点帮助. //game.h头文件 #include<stdio.h> #include<stdlib.h> #include<time.h> #define ROW 9//定义了界面的长宽,可以直更改ROW,COL的值,避免了程序中数字重复出现 #define

C语言简单实现扫雷小游戏

本文实例为大家分享了C语言简单实现扫雷小游戏 的具体代码,供大家参考,具体内容如下 游戏规则: 以9*9棋盘为例,棋盘上随机分布着10个地雷,玩家在棋盘上进行点击,如果被点击的格子是地雷,则玩家被炸"死",游戏结束:如果被点击的格子上没有地雷,与被点击的格子相邻的格子(被点击格子的上下左右还有斜向,共八个格子)有地雷,则在被点击的格子上显示这些地雷的总数,如果与被点击的格子相邻的八个格子都没有地雷,则棋盘自动展开,直到与展开的格子相邻的格子有地雷才停止.此时最后被展开的格子显示其相邻格

C语言实现简单扫雷小游戏

本文实例为大家分享了C语言实现扫雷小游戏的具体代码,供大家参考,具体内容如下 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <windows.h> #include <time.h> /* 用 C 语言写一个简单的扫雷游戏 */ // 1.写一个游戏菜单 Menu() // 2.开始游戏 // 1.初始化二维数组 Init_Interface() // 2.打印游戏界面 Print_Interfa

C语言代码实现扫雷小游戏

本文实例为大家分享了C语言实现扫雷小游戏的具体代码,供大家参考,具体内容如下 主页面: 游戏页面: 虽然页面比较low,但我已经尽力了 具体代码实现: #include<stdio.h> #include<windows.h> #include<conio.h> #include<stdlib.h> #include<time.h> int n;//记录已经探索的区域数 int x,y;//光标的横纵坐标 int T;//判断游戏是否失败,T=1

js+canvas实现简单扫雷小游戏

扫雷小游戏作为windows自带的一个小游戏,受到很多人的喜爱,今天我们就来尝试使用h5的canvas结合js来实现这个小游戏. 要写游戏,首先要明确游戏的规则,扫雷游戏是一个用鼠标操作的游戏,通过点击方块,根据方块的数字推算雷的位置,标记出所有的雷,打开所有的方块,即游戏成功,若点错雷的位置或标记雷错误,则游戏失败. 具体的游戏操作如下 1.可以通过鼠标左键打开隐藏的方块,打开后若不是雷,则会向四个方向扩展 2.可以通过鼠标右键点击未打开的方块来标记雷,第二次点击取消标记 3.可以通过鼠标右键