頁(yè)面中點(diǎn)擊鼠標(biāo)右鍵----彈出與windows界面相似的菜單
發(fā)表時(shí)間：2024-01-16 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]想在Web Form中做出與windows中相似的菜單，可是發(fā)帖問(wèn)人又沒(méi)人回，自己摸索郁悶了一天之后，終于在MSDN中找到了相似的方法，具體如下： （下面的代碼帖到記事本能直接運(yùn)行查看） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra...
想在Web Form中做出與windows中相似的菜單，可是發(fā)帖問(wèn)人又沒(méi)人回，自己摸索郁悶了一天之后，終于在MSDN中找到了相似的方法，具體如下：
（下面的代碼帖到記事本能直接運(yùn)行查看）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:MSHelp=http://msdn.microsoft.com/msHelp>
<HEAD>
<TITLE>oncontextmenu Event Sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">
<!--設(shè)置菜單的背景樣式-->
<STYLE>
.menuItem {font-family:sans-serif;font-size:10pt;width:100;padding-left:20;
background-Color:menu;color:black}
.highlightItem {font-family:sans-serif;font-size:10pt;width:100;padding-left:20;
background-Color:highlight;color:white}
.clickableSpan {padding:4;width:500;background-Color:blue;color:white;border:5px gray solid}
</STYLE>
<SCRIPT>
//<!--
//彈出菜單：
function displayMenu() {
whichDiv=event.srcElement;
menu1.style.leftPos+=10;
menu1.style.posLeft=event.clientX;
menu1.style.posTop=event.clientY;
menu1.style.display="";
menu1.setCapture();
}
//高亮顯示鼠標(biāo)移上是菜單的背景
function switchMenu() {
el=event.srcElement;
if (el.className=="menuItem") {
el.className="highlightItem";
} else if (el.className=="highlightItem") {
el.className="menuItem";
}
}
//點(diǎn)擊菜單相應(yīng)項(xiàng)時(shí)觸發(fā)相應(yīng)的事件
function clickMenu() {
menu1.releaseCapture();
menu1.style.display="none";//點(diǎn)擊后隱藏菜單
el=event.srcElement;
if (el.id=="mnuRed") {
whichDiv.style.backgroundColor="red";
} else if (el.id=="mnuGreen") {
whichDiv.style.backgroundColor="green"; //選擇Green時(shí)背景變?yōu)榫G色
} else if (el.id=="mnuBlue") {
whichDiv.style.backgroundColor="blue"; //選擇blue時(shí)背景變?yōu)樗{(lán)色
} else if (el.id=="mnuYellow") {
whichDiv.style.backgroundColor="yellow"; //選擇yellow時(shí)背景變?yōu)辄S色
}
}
//-->
</SCRIPT>
<!-- SAMPLE_STYLE_START -->
<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">
<!-- SAMPLE_STYLE_END -->
<LINK REL="stylesheet" TYPE="text/css" HREF="ms-help://Hx/HxRuntime/HxLink.css"><STYLE TYPE="text/css">
PRE.clsCode { font-size:110%; }
PRE.clsSyntax { font-size:100%; }
TD DIV.clsBeta { display:none;}
MSHelp\:link {
color:#0000ff;
text-decoration:underline;
cursor:hand;
hoverColor:#3366ff;
filterString: ;}
</STYLE>
</HEAD>
<!-- TOOLBAR_START -->
<!-- TOOLBAR_EXEMPT -->
<!--TOOLBAR_END-->
<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">
<!-- CONTENTS_START -->
<H1>oncontextmenu Event Sample</H1>
<P>This sample shows how to use the <B>oncontextmenu</B> event handler, available in Microsoft® Internet Explorer 5 and later, to display both standard and custom context menus and prevent context menus from displaying. Experiment with each of the following boxes to see how you can apply different methods either to display or to inhibit context menus. Each box provides instructions for you to follow.
</P>
<SPAN class="clickableSpan">
1. The default context menu always displays when you right-click in this box.
<b><br>Code: </b>
//no code necessary
</SPAN><br><br>
<SPAN class="clickableSpan" oncontextmenu="return event.ctrlKey">
2. The default context menu displays only if you right-click in this box while holding down the Ctrl key. This is useful for developing and debugging purposes.
<b><br>Code: </b>
oncontextmenu="return event.ctrlKey"
</SPAN><br><br>
<SPAN class="clickableSpan" oncontextmenu="return false">
3. A context menu never displays when you right-click in this box.
<b><br>Code: </b>
oncontextmenu="return false"
</SPAN><br><br>
<SPAN class="clickableSpan" oncontextmenu="displayMenu();return false">
4. A custom context menu displays when you right-click in this box.
<b><br>Code: </b>
oncontextmenu="showMenu();return false;"
</SPAN><br><br>
<SPAN class="clickableSpan" oncontextmenu="if (!event.ctrlKey){displayMenu();return false;}">
5. A custom menu displays when you right-click in this box. If you right-click while holding down the Ctrl key, the default context menu displays.
<b><br>Code: </b>
oncontextmenu="if (!event.ctrlKey){displayMenu();return false;}"
</SPAN><br>
<div id=menu1 onclick="clickMenu()" onmouseover="switchMenu()" onmouseout="switchMenu()" style="position:absolute;display:none;width:100;background-Color:menu; border: outset 3px gray">
<div class="menuItem" id=mnuRed>Red</div>
<div class="menuItem" id=mnuGreen>Green</div>
<div class="menuItem" id=mnuBlue>Blue</div>
<div class="menuItem" id=mnuYellow>Yellow</div>
</div>
<!-- CONTENTS_END -->
<!-- START_PAGE_FOOTER -->
<BR><BR><BR>
<MSHelp:link xmlns:MSHelp="http://msdn.microsoft.com/mshelp" keywords="msdn_copyright" TABINDEX="0">© 2003 Microsoft Corporation. All rights reserved.</MSHelp:link>.
<!-- END_PAGE_FOOTER -->
</BLOCKQUOTE>
</BODY>
</HTML>
畢竟是MSDN，幾乎是要什么有什么有什么啊．經(jīng)過(guò)這次打擊后，總結(jié)出經(jīng)驗(yàn)：不會(huì)的東西不要很快就去問(wèn)別人，靠自己摸索其實(shí)一樣能找出另你滿意的答案．
不過(guò)還有一點(diǎn)很重要的是要學(xué)會(huì)查MSDN，輸入的關(guān)鍵字要命中要害，可以說(shuō)應(yīng)該要一針見(jiàn)血．還有實(shí)在找不出的時(shí)候，就去查看目錄，一級(jí)一級(jí)的往下找，總能找到你想要的．
