A lightweight XHTML Right-click menu [Support IE and firefox]_javascript tips

Source: Internet
Author: User
Tags visibility
Many of the right-click menus currently circulating on the Web do not support XHTML, mainly because of differences between Document.body and Document.documentelement
There is a lot of the right key menu program is too large, so they wrote a mini right-click menu, support IE and Firefox
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>adad</title> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <style> #rightMenu {padding:2px; Background-color:menu; Cursor:default; Position:absolute; z-index:900; border-right:1px solid #aaa; border-bottom:1px solid #aaa; border-top:1px solid #fff; border-left:1px solid #fff; font-size:14px; Word-break:keep-all; }. menuitem{Display:block; padding:3px; </style> <script>/** *jrightmenu class, display user-defined right-click menu in browser *[Note: only for XHTML * @author Brull * @email brull@1 63.com * @date 2007-01-24//** * @param menuItem Menu display content, is an array * @param handle corresponding to the MenuItem menu of Processing JS Code section, also is the number of groups * * JR Ightmenu=function (menuitem,handle) {var rightmenu=document.createelement ("div"); var menuinnerhtml= "";//HTML in the menu containerContent var $items =this.menuitem=menuitem; var $handle =this.handle=handle; Rightmenu.id= "Rightmenu";//id for (var i in $items) {if ($items [I].indexof ("<pr")!=-1) menuinnerhtml+= $items [i]; else menuinnerhtml+= "<span class=menuitem onmouseover=this.style.backgroundcolor=\" "#3e80ca \"; window.status= this.innerhtml onmouseout=this.style.backgroundcolor=\ "\" window.status=\ "\ onclick=\" "+handle[i]+" \ ">" + $items [i] + "</span>"; } rightmenu.innerhtml=menuinnerhtml; rightMenu.style.visibility = "visible"; Rightmenu.onmousedown=function (e) {e=e| | window.event; Document.all?e.cancelbubble=true:e.stoppropagation (); Rightmenu.onselectstart=function () {return false; } document.body.appendChild (Rightmenu); this.menu=rightmenu;//convenient other method reference}; Jrightmenu.prototype.show=function (e) {e=e| | window.event; var root=document.documentelement; var x = root.scrollleft+e.clientx;//Menu top left corner horizontal axis var y = root.scrolltop+e.clienty;//Menu upper left corner ordinate if (This.menu.clientwidth+e.clientx > Root.clientwidth) {x=x-this.menu.clientwidth; } if (This.menu.clientheight+e.clienty > Root.clientheight) {y=y-this.menu.clientheight; } this.menu.style.left = x+ "px"; This.menu.style.top = y+ "px"; this.menu.style.visibility = "visible"; return false; } jrightmenu.prototype.hidden=function () {this.menu.style.visibility = "hidden"; } </script> <script> window.onload=function () {rightmenu=new jrightmenu (["Its mine!", "its yours!"],["al ERT (It is mine!) ", alert (it is yours!));} Document.oncontextmenu=function (evt) {return rightmenu.show (evt);}; Document.onclick=function () {Rightmenu.hidden ();} </script> </pead> <body> <p>adadad king <p>adadad </p> King King </p><p> Adadad King King </p><p>adadad King Wang King </p><p>adadad King </p><p>adadad Kings King King </p> <p>adadad King King </p><p>adadad King </p><p>adadad King King </p><p>adadad King King </p><p>adadad King </p><p>adadad King King </p><p> Adadad King King </p><p>adadad King Wang King </p><p>adadad King </p><p>adadad Kings King King </p> <p>adadad King King </p><p>adadad King Wang King </p><p>adadad King </p><p>adadad Kings King King < /p><p>adadad King King </p><p>adadad King King </p> Awddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.