Home >Web Front-end >JS Tutorial >A lightweight XHTML right-click menu [supports IE and firefox]_javascript skills

A lightweight XHTML right-click menu [supports IE and firefox]_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:20:08931browse

Currently, many right-click menus circulating on the Internet do not support XHTML, mainly because of the differences between document.body and document.documentElement.
Another thing is that many right-click menu programs are too big, so I wrote a mini right-click menu that supports IE and Firefox.


[Ctrl A select all Note:
If you need to introduce external Js, you need to refresh to execute <script> /** *JRightMenu类,在浏览器里显示用户定制右键菜单 *[注意]:只适用于XHTML *@author brull *@email brull@163.com *@date 2007-01-24 */ /** *@param menuItem 菜单显示内容,是一个数组 *@param handle 对应menuItem菜单的处理js代码段,同样是个数组 */ JRightMenu=function (menuItem,handle){ var rightMenu=document.createElement("div"); var menuInnerHTML="";//菜单容器里的HTML内容 var $items=this.menuItem=menuItem; var $handle=this.handle=handle; rightMenu.id="rightMenu";//id for(var i in $items){ if($items[i].indexOf("<hr")!=-1) menuInnerHTML+=$items[i]; else menuInnerHTML+="<span class=&#146;menuItem&#146; onmouseover=&#146;this.style.backgroundColor=\"#3e80ca\";window.status=this.innerHTML;&#146; onmouseout=&#146;this.style.backgroundColor=\"\";window.status=\"\"&#146; onclick=\""+handle[i]+"\" >" +$items[i] +""; } 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;//方便别的方法引用 }; JRightMenu.prototype.show=function(e){ e=e||window.event; var root=document.documentElement; var x = root.scrollLeft+e.clientX;//菜单左上角横坐标 var y = root.scrollTop+e.clientY;//菜单左上角纵坐标 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(["it&#146;s mine!","it&#146;s yours!"],["alert(&#146;it is mine!&#146;)","alert(&#146;it is yours!&#146;)"]); } document.oncontextmenu=function(evt){return rightMenu.show(evt);}; document.onclick=function(){rightMenu.hidden();} </script>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn