JS implementation does not use the picture imitation Windows right button menu effect code

JS implementation does not use the picture imitation Windows right button menu effect code _javascript Tips

Last Update:2017-01-19 Source: Internet

Author: User

Tags extend microsoft frontpage

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The example of this article describes the JS implementation does not use the picture imitation Windows right-click menu effect code. Share to everyone for your reference, specific as follows:

Here Demo JS do not use the picture imitation Windows right-click menu effect, this code flexible use of the text ding Word, with CSS and JS made this and the system right menu very similar to the Dongdong.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<HTML> <HEAD> <TITLE> Cool Multilevel right button menu </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, @ xxfareastfont-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= ' valign= ' bottom ' bgcolor= ' #000000 ' onclick= Window.event.cancelbubble=true;
 Class=info> the sea to make the system ";
 Htmlstr + = "</td><td height= ' 264 width= ' style= ' padding:1 ' valign= ' bottom '"; Htmlstr = "<table width= ' 100% ' border= ' 0 ' cellspacing=' 0 ' >\n ';
 Htmlstr + = "<!--Insert A Extend menu or Item on this for e_rbpm-->\n";
 Htmlstr + = "</table></td></tr></table>\n";
 Htmlstr + = "</div>\n";
 Htmlstr + + <!--Insert A Extend_menu area on this 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 this for E_" +id+ "-->";
 TempStr + = "</table>\n";
 TempStr + = "</div>\n";
 TempStr + = "<!--Insert A Extend_menu area on this for E_" +id+ "-->";
 TempStr + = "<!--Insert A Extend_menu area on this for E_" +parent+ "-->"; Htmlstr = Htmlstr.replace ("<!--Insert A Extend_menu area in here for E_" +parent+ "--> ", TEMPSTR);
 Eval ("A_" +id+ "= new Array ()");
 TempStr = "";
 TempStr + = "<!--Extend item:p_" +id+ "-->\n";
 TempStr + = "<tr id= ' p_" +id+ "' class= '";
 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 this for E_" +parent+ "-->";
 Htmlstr = Htmlstr.replace ("<!--Insert A Extend menu or Item on this 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; '
  &GT;&LT;TD colspan= ' 2 ' height= ' 1 ' >

I hope this article will help you with your JavaScript programming.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More