html_网页自定义右键菜单.doc

超酷网页右键菜单 body font-family: 宋体; font-size: 12px; margin-left: 0px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; .skin1 padding-top: 4px; cursor: default; line-height: 24px; padding-left: 15px; z-index: 12; visibility: hidden; width: 158px; background-color: #F0F0F0; border: 1px solid buttonface; border: 2 outset buttonhighlight; /*定义菜单条的显示样式*/ .menuitems padding: 2px 1px 2px 10px; function f_Menu() var W = document.documentElement.clientWidth; /网页可视 宽度 var H = document.documentElement.clientHeight; /网页可视 高度 var X = event.clientX; /当前鼠标X坐标 var Y = event.clientY; /当前鼠标Y坐标var rightW = document.documentElement.clientWidth - event.clientX; var bottomH = document.documentElement.clientHeight - event.clientY;if (rightW event.clientX)/如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度 div1.style.marginLeft = (W - (W - X + div1.offsetWidth) + px; else /否则，就定位菜单的左坐标为当前鼠标位置 div1.style.marginLeft = X + px; if (bottomH Y)/如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度 div1.style.marginTop = (H - (H - Y + div1.offsetHeight) + px; else /否则，就定位菜单的上坐标为当前鼠标位置 div1.style.marginTop = event.clientY + px; /设置菜单可见 div1.style.visibility = visible; return false; function f_hidden()/隐藏菜单 div1.style.visibility = hidden; function f_Resume()/恢复菜单条项目的正常显示 if (event.srcElement.className = menuitems) event.srcElement.style.backgroundColor = ; event.srcElement.style.color = black; window.status = ; window.onload = function () if (document.all & window.print)/如果当前浏览器是Internet Explorer，document.all就返回真 document.oncontextmenu = f_Menu; /重定向鼠标右键事件的处理过程为自定义程序f_Menu document.body.onclick = f_hidden; /重定向鼠标左键事件的处理过程为自定义程序f_hidden 排列图标 刷新 粘帖 新建 小工具 属性 HTML中实现右键菜单功能我们使用的应用系统很多都有右键菜单功能。但是在网页上面，点击右键一般显示的却是IE默认的右键菜单，那么我们如何实现自己的右键菜单呢？下面将讲解右键菜单功能的实现原理和实现代码。实现原理在HTML语言中，基本上每个对象都有一个oncontextmenu事件，这个事件就是鼠标的右键单击事件（onclick事件是鼠标的左键单击事件），那么我们就可以在鼠标右击的时候，让系统弹出一个窗口（这个是popup窗口，显示在IE的最前面，没有菜单），上面显示我们想要显示的菜单信息，当我们单击其中某一项的时候，就执行我们设定的动作，然后将弹出窗口关闭。实现代码下面我写了一个示例代码，模拟一个树型菜单，当我们右键点击树型菜单某一项的时候，就会弹出右键菜单，里面有“新增”、“修改”、“删除”三个菜单项，单击某项会执行相应的操作。如果是在页面的其它地方点击右键的话，就只显示“新增”一个菜单项。下面的代码内容：contextmenuDemo.html文件 根目录 菜单一 菜单二 新增 修改 删除 /*根据传入的id显示右键菜单*/function showMenu(id) menuForm.id.value = id; if( = id) popMenu(itemMenu,100,100); else popMenu(itemMenu,100,111); event.returnValue=false;event.cancelBubble=true;return false;/*显示弹出菜单*menuDiv:右键菜单的内容*width:行显示的宽度*rowControlString:行控制字符串，0表示不显示，1表示显示，如“101”，则表示第1、3行显示，第2行不显示*/function popMenu(menuDiv,width,rowControlString) /创建弹出菜单 var pop=window.createPopup(); /设置弹出菜单的内容 pop.document.body.innerHTML=menuDiv.innerHTML; var rowObjs=pop.document.body.all0.rows; /获得弹出菜单的行数 var rowCount=rowObjs.length; /循环设置每行的属性 for(var i=0;irowObjs.length;i+) /如果设置该行不显示，则行数减一 var hide=rowControlString.charAt(i)!=1; if(hide) rowCount-; /设置是否显示该行 rowObjsi.style.display=(hide)?none:; /设置鼠标滑入该行时的效果 rowObjsi.cells0.onmouseover=function() this.style.background=#818181; this.style.color=white; /设置鼠标滑出该行时的效果 rowObjsi.cells0.onmouseout=function() this.style.background=#cccccc; this.style.color=black; /屏蔽菜单的菜单 pop.document.oncontextmenu=function() return false; /选择右键菜单的一项后，菜单隐藏 pop.document.onclick=function() pop.hide(); /显示菜单 pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body); return true;function create() alert(create + menuForm.id.value + !);function update() alert(update + menuForm.id.value + !);function del() alert(delete + menuForm.id.value + !);function clickMenu() alert(you click a menu!);实现方法很简单。 不过就是只有一层 a.menuitem text-decoration:none;color:menutext a.menuitem:hover background-color:highlight;color:highlighttext div.contextmenu background-color:threedface;border-style:outset;border-width:2;position:absolute;visibility:hidden;z-index:999 function window.onbeforeunload() cmenu.style.visibility= hidden ; function document.onclick() cmenu.style.visibility= hidden ; function document.oncontextmenu() var e=event.srcElement; var l=event.offsetX; var t=event.offsetY; do l+=e.offsetLeft; t+=e.offsetTop; wh