在网页上的右键弹出菜单
各位做Web开发的朋友对于固定的网页菜单大多比较熟悉，网上资料也比较多，可是我发现对于右键弹出式菜单的介绍却少的可怜。在这里我介绍一个应用在刚做的项目中的弹出菜单。它是使用htc实现的。
<html xmlns:hGui><!--Content of sMenu.htc --> <head> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <public:component tagName="sMenu"> <public:attach event="oncontentready" onevent="OnContentReady()" /> <public:attach event="ondocumentready" onevent="init()" /> <public:attach event="ondeactivate" onevent="element_OnDeActivate()" /> <public:method name="show" /> <public:method name="buildMenu" /> <public:event name="onmenumousedown" id="idMenuMouseDown" /> <public:event name="onmenuclick" id="idMenuClick" /> <public:event name="onbeforepopup" id="idMenuBeforePopup" /> <public:event name="onhidden" id="idHidden" /> <PUBLIC:DEFAULTS viewLinkContent /> </public:component>
<style type="text/css">
<!--body
{}{
}.Panel{}{ BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 9pt; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #666666 1px solid; COLOR: menutext; PADDING-TOP: 0px; BORDER-BOTTOM: #666666 1px solid; FONT-FAMILY: SimSun; POSITION: absolute; BACKGROUND-COLOR: #f9f8f7; filter:progid:DXImageTransform.Microsoft.Shadow(color='dimGray', Direction=135, Strength=2);}span.img{}{ filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=50, Style=2, StartX=0, FinishX=100, StartY=0, FinishY=100);}.clsHSpacer{}{ BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 1px; PADDING-BOTTOM: 2px; MARGIN: 2px 0px 3px; OVERFLOW: hidden; BORDER-LEFT: medium none; WIDTH: 100%; PADDING-TOP: 2px; BORDER-BOTTOM: buttonhighlight 1px solid; POSITION: relative; HEIGHT: 2px; BACKGROUND-COLOR: red}
--></style> <script language="jscript"> <!-- var sMI,sMenu; var lightTr; var showSubMenu=null; function OnContentReady() { element.style.visibility="hidden"; element.style.position="absolute"; ctrBody.style.visibility="visible"; } function createImgInTD(strSrc, td) { var span = document.createElement("span"); with (span.style) { width = "20px"; height = "16px"; backgroundImage = "url(" + strSrc + ")"; backgroundPosition = "center center"; backgroundRepeat = "no-repeat"; verticalAlign = "baseline"; } td.appendChild(span); } function createSeperatorTD(td, tr) { td.style.height="5px"; td = tr.insertCell(); td.style.height="5px"; td.colSpan=3; td.innerHTML = "<div class='clsHSpacer'></div>"; } function buildMenu(arrayItems) { while(tableMenu.rows.length > 1) { tableMenu.deleteRow(1); } var i; sMI = arrayItems; sMenu = new Array(sMI.length); for(i = 0; i < sMI.length; i++) { sMenu[i] = sMI[i].split(","); } var Tr, Td; for(i = 0; i < sMenu.length; i++) { if (sMenu[i][0].length > 0) { Tr = tableMenu.insertRow(); Td = Tr.insertCell(); sMenu[i][0] = rTrim(lTrim(sMenu[i][0])); Td.innerText = ""; Td.style.width = "20px"; Td.vAlign = "middle"; if (sMenu[i].length > 4) if (sMenu[i][4].length > 0) createImgInTD(sMenu[i][4], Td); Td.style.backgroundColor = "#dbd8d1"; if(sMenu[i][0] == "-") createSeperatorTD(Td, Tr); else { Td.style.height = 20; Td = Tr.insertCell(); Td.vAlign = "middle"; var span = document.createElement("span"); span.innerHTML = sMenu[i][0]; span.style.marginLeft = "4px"; Td.appendChild(span); Td.span = span; Td.noWrap = true; if (Td.offsetWidth < 100) Td.style.width = 100; Td=Tr.insertCell(); Td.style.width=15; if(sMenu[i][1]) { if(element.document.all(sMenu[i][1])) { Tr.subMenu=element.document.all(sMenu[i][1]); } Td.innerText = "8"; Td.style.font = "8pt Marlett"; } Tr.menuText = sMenu[i][0]; Tr.menuData = lTrim(rTrim(sMenu[i][5])); Tr.onmouseenter = mi_OnMouseEnter; Tr.onmouseleave = mi_OnMouseLeave; Tr.onclick = mi_OnClick; Tr.onmousedown = mi_OnMouseDown; } } //End For } } function init() { var strInner = lTrim(rTrim(element.innerHTML)); if (strInner.length > 0) { var arrayItems = strInner.split(";"); buildMenu(arrayItems); } } function element_OnDeActivate() { if (showSubMenu == null) hide(); } function mi_OnMouseEnter() { var Tr; Tr=event.srcElement; event.srcElement.style.backgroundColor="#b6bdd2"; lightTr=event.srcElement; tableMenu.setActive(); if(Tr.subMenu) { showSubMenu = Tr.subMenu; showSubMenu.attachEvent("onhidden",onSubMenuHidden); showSubMenu.show(absLeft(element) + Tr.offsetLeft + Tr.offsetWidth, absTop(element)+Tr.offsetTop); } } function mi_OnMouseLeave() { event.srcElement.style.backgroundColor="#f9f8f7"; event.srcElement.style.color="menutext"; lightTr=null; } function mi_OnClick() { if (lightTr.disabled == false) { hide(); var oEvent; oEvent=createEventObject(); oEvent.returnValue=true; oEvent.menuText = lightTr.cells[1].innerText; oEvent.menuData = lightTr.menuData; idMenuClick.fire(oEvent); } } function mi_OnMouseDown() { var oEvent; oEvent = createEventObject(); oEvent.returnValue = true; oEvent.menuText = lightTr.cells[1].innerText; oEvent.menuData = lightTr.menuData; idMenuMouseDown.fire(oEvent); } function fireBeforePopup(oTR) { var oEvent; oEvent = createEventObject(); oEvent.returnValue = true; if (oTR.cells.length > 1) oEvent.menuText = oTR.cells[1].innerText; else oEvent.menuText = ""; oEvent.menuData = oTR.menuData; oEvent.disableItem = false; idMenuBeforePopup.fire(oEvent); var oResult = new Object; oResult.disableItem = oEvent.disableItem; oResult.returnValue = oEvent.returnValue; return oResult; } function browseMenuItem() { var oResult = null; for (var i = 0; i < tableMenu.rows.length; i++) { var oRow = tableMenu.rows(i); oResult = fireBeforePopup(oRow); if (oResult.returnValue == false) return false; oRow.disabled = oResult.disableItem; if (typeof(oRow.menuData) != "undefined") { for (var j = 0; j < oRow.cells.length; j++) oRow.cells(j).disabled = oRow.disabled; } } return true; } function show(x, y) { if (browseMenuItem()) { oTransContainer.filters[0].Apply(); with(oTransContainer) { style.left = 0; style.top = 0; style.width = divPanel.offsetWidth; style.height = divPanel.offsetHeight; } with(divPanel) { style.left = 0; style.top = 0; style.width = tableMenu.offsetWidth; style.height = tableMenu.offsetHeight; } with(frmPanel) { style.left = 0; style.top = 0; style.width = divPanel.offsetWidth; style.height = divPanel.offsetHeight; } with(element) { style.pixelLeft = x; style.pixelTop = y; style.width = divPanel.offsetWidth; style.height = divPanel.offsetHeight; } element.style.visibility = "visible"; oTransContainer.filters[0].Play(); tableMenu.setActive(); } } function showSubMenu(x, y, father) { show(x, y); } function hide() { element.style.visibility = "hidden"; var oEvent; oEvent = createEventObject(); idHidden.fire(oEvent); } function onSubMenuHidden() { showSubMenu.detachEvent("onhidden", onSubMenuHidden) if (element != element.document.activeElement) hide(); showSubMenu = null; } function absLeft(ele) { var e, left = 0; e = ele; while(e.tagName != "BODY") { left += e.offsetLeft; e = e.offsetParent; } return left; } function absTop(ele) { var e, top = 0; e=ele; while(e.tagName != "BODY") { top += e.offsetTop; e = e.offsetParent; } return top; } function lTrim(s) { var i; for(i = 0; i < s.length; i++) { if(s.charCodeAt(i) != 32) return(s.substr(i)); } return s; } function rTrim(str) { var nLen = str.length; for (var i = str.length - 1; i >= 0; i--) if (str.charCodeAt(i) != 32) break; else nLen--; return str.substr(0, nLen); }//--></script> </head> <body id="ctrBody" style="font-size:12;cursor:default;visibility:hidden;" onselectstart="return false;"> <DIV ID="oTransContainer" STYLE="z-index:4998;position:absolute; filter:progid:DXImageTransform.Microsoft.Fade(duration=0.4,overlap=1.0) "> <iframe id="frmPanel" frameborder="0" scrolling="no" style="position:absolute;z-index:4999"> </iframe> <div id="divPanel" class="Panel" style="position:absolute;z-index:5000"> <table id="tableMenu" border="0" cellspacing="0" cellpadding="0" style="font-size:12"> <tr id="titleRow"> <td colspan="3" height="0" id="titleBar" onmousemove="Title_mMove()" onmousedown="Title_mDown()" onmouseup="Title_mUp()"></td> </tr> </table> </div> </DIV> </body> <script> var xDown,yDown; var xOrg,yOrg; var bMoving=false; var movingEle=element; function Title_mDown() { movingEle=element; titleBar.setCapture(); bMoving=true; xDown=event.x;yDown=event.y; xOrg=movingEle.style.pixelLeft; yOrg=movingEle.style.pixelTop; } function Title_mUp() { if (bMoving) { bMoving = false; movingEle = null; titleBar.releaseCapture(); } } function Title_mMove() { if (bMoving) { movingEle.style.position = "absolute"; var nLeft,nTop; nLeft = movingEle.style.pixelLeft+event.x-xDown; nTop = movingEle.style.pixelTop+event.y-yDown; if (nLeft > 0) movingEle.style.pixelLeft = nLeft; else movingEle.style.pixelLeft = 0; if (nTop > 0) movingEle.style.pixelTop = nTop; else movingEle.style.pixelTop = 0; } } </script></html>
使用该htc的范例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>PopupMenuTest</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name=vs_defaultClientScript content="JavaScript"> <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5"> </head> <body MS_POSITIONING="GridLayout" oncontextmenu="return DisplayPopupMenu();"> <script language="javascript"> function DisplayPopupMenu() { menuTree.show(event.x, event.y); return false; } function menuTreeBeforePopup() { } function menuTreeClick(objTree) { switch(event.menuData) { case "refresh": alert('refresh clicked.'); break; case "property":alert('property clicked.'); break; } } </script> <form id="Form1" method="post" runat="server"> <?XML:NAMESPACE PREFIX="hGui" /><?import namespace="hGui" implementation="/webcontrols/sMenu.htc" /> <hGui:smenu id="menuTree" onmenuclick="menuTreeClick()" onbeforepopup="menuTreeBeforePopup();" style="Z-INDEX: 100"> 刷新,,,,./images/refresh.gif,refresh; -,0,,,,; 属性,,,,./images/property.gif,property </hGui:smenu> </form> </body></html>
怎么样，发现了没？这个菜单可是模仿Office样式的哦。弹出菜单就介绍到这了，怎么应用就看你们的了。
如果这样你们还不知道怎样应用的话，
<<---模仿一下这个看看吧，说不定会有灵感。
