JS实现简易网页右键菜单

<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <mce:script src="RightMenu.js" mce_src="RightMenu.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- var menuID; //菜单ID function RightMenu(id, tableCss, doc) { this.id = id; menuID = id; this.Item = new Array(); this.TableClass = tableCss; this.TdClass = ""; this.Doc = doc; doc.oncontextmenu = function() { var oMenu = document.getElementById(menuID); if (oMenu) { var x, y; if (event.clientX > doc.clientWidth || event.clientY > doc.clientHight) { x = doc.clientWidth; y = doc.clientHeight; } else { x = event.clientX; y = event.clientY; } oMenu.style.visibility = "visible"; oMenu.style.left = x; oMenu.style.top = y; } return false; //停止页面响应右键菜单 } //添加菜单子项 this.AddItem = function(id, content, event) { var itemStr; if (this.TdClass || this.TdClass != "") { itemStr = "<tr><td onclick=/"" + event + "/" onmouseover = /"ChangeStyle('" + this.TdClass + "')/" onmouseout=/"ChangeStyle('')/">"; } else { itemStr = "<tr><td onclick=/"" + event + "/">"; } itemStr += content; itemStr += "</td></tr>"; this.Item[this.Item.length] = itemStr; } //隐藏菜单 this.Hidden = function() { var oDiv = document.getElementById(this.id); //alert(oDiv); oDiv.style.visibility = "hidden"; } //构建菜单 this.CreateMenu = function() { var htmlStr = "<div id=/"" + this.id + "/" style="/" mce_style="/""position:absolute;left=0;top=0; visibility:hidden/">"; if (this.TableClass) { htmlStr += "<table class=/"" + this.TableClass + "/">"; } else { htmlStr += "<table>"; } for (i = 0; i < this.Item.length; i++) { htmlStr += this.Item[i]; } htmlStr += "</table>" htmlStr += "</div>"; this.Doc.body.innerHTML += htmlStr; } } //改变Css样式 function ChangeStyle(className) { var o = event.srcElement; if (o) { o.className = className; } } var menu; window.onload = function() { menu = new RightMenu("MyDiv", "table", document); menu.TdClass = "td"; menu.AddItem("i1", "1", "alert(1)"); menu.AddItem("i2", "2", "alert(2)"); menu.AddItem("i3", "3", "alert(3)"); menu.CreateMenu(); } document.onclick = function() { menu.Hidden(); } // --></mce:script> <mce:style type="text/css"><!-- .table { border-bottom-width: 1px; background-color: ButtonFace; width: 50px; } .td { background: #FFFFFF; } --></mce:style><style type="text/css" mce_bogus="1"> .table { border-bottom-width: 1px; background-color: ButtonFace; width: 50px; } .td { background: #FFFFFF; } </style> </head> <body onclick="javascript:menu.Hidden()"> </body> </html>    

我例子的CSS样子随便设的,呵,不是很好看,不过大致右键菜单就是这样做出来的,哈

你可能感兴趣的:(JavaScript,function,css,table,Class,menu)