简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

JS réalise l'imitation du code d'effet du menu contextuel de Windows sans utiliser les compétences pictures_javascript

WBOY
Libérer： 2016-05-16 15:35:47
original
1379 Les gens l'ont consulté

L'exemple de cet article décrit le code JS pour imiter l'effet du menu contextuel de Windows sans utiliser d'images. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Voici une démonstration de JS imitant l'effet du menu contextuel de Windows sans utiliser d'images. Ce code utilise de manière flexible les caractères Wending et coopère avec CSS et JS pour créer quelque chose de très similaire au menu contextuel du système.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/

Le code spécifique est le suivant : 

<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>
Copier après la connexion

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Étiquettes associées：
js 右键菜单
source：php.cn
Article précédent：Explication détaillée de la façon dont JavaScript exploite les éléments et styles HTML_Connaissances de base Article suivant：13 fonctions PHP super pratiques, lesquelles connaissez-vous ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Un pool de travail déclaré sur plusieurs routes peut-il toujours maintenir son utilisation du processeur sans se soucier du seuil J'espère trouver un système node.js avec un pool de travailleurs pour gérer les tâches gou...
Depuis 2024-04-06 19:54:23
0
1
444
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Doit-on utiliser SSG pour déployer des tableaux de bord créés avec Nuxt.js ? Nous développerons un tableau de bord à usage interne en utilisant Nuxt.js. Puisqu’il s’ag...
Depuis 2024-04-06 13:17:44
0
1
493
Electron obtient AppData en préchargement Comment obtenir le répertoire AppData préchargé ? Background.js[...]asyncfunctioncreateWin...
Depuis 2024-04-06 11:05:31
0
1
417
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！