頁面中點擊鼠標右鍵----彈出與windows界面相似的菜單
發表時間:2024-05-18 來源:明輝站整理相關軟件相關文章人氣:
[摘要]想在Web Form中做出與windows中相似的菜單,可是發帖問人又沒人回,自己摸索郁悶了一天之后,終于在MSDN中找到了相似的方法,具體如下: (下面的代碼帖到記事本能直接運行查看) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra...
想在Web Form中做出與windows中相似的菜單,可是發帖問人又沒人回,自己摸索郁悶了一天之后,終于在MSDN中找到了相似的方法,具體如下:
(下面的代碼帖到記事本能直接運行查看)
<!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">
<!--設置菜單的背景樣式-->
<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();
}
//高亮顯示鼠標移上是菜單的背景
function switchMenu() {
el=event.srcElement;
if (el.className=="menuItem") {
el.className="highlightItem";
} else if (el.className=="highlightItem") {
el.className="menuItem";
}
}
//點擊菜單相應項時觸發相應的事件
function clickMenu() {
menu1.releaseCapture();
menu1.style.display="none";//點擊后隱藏菜單
el=event.srcElement;
if (el.id=="mnuRed") {
whichDiv.style.backgroundColor="red";
} else if (el.id=="mnuGreen") {
whichDiv.style.backgroundColor="green"; //選擇Green時背景變為綠色
} else if (el.id=="mnuBlue") {
whichDiv.style.backgroundColor="blue"; //選擇blue時背景變為藍色
} else if (el.id=="mnuYellow") {
whichDiv.style.backgroundColor="yellow"; //選擇yellow時背景變為黃色
}
}
//-->
</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,幾乎是要什么有什么有什么啊.經過這次打擊后,總結出經驗:不會的東西不要很快就去問別人,靠自己摸索其實一樣能找出另你滿意的答案.
不過還有一點很重要的是要學會查MSDN,輸入的關鍵字要命中要害,可以說應該要一針見血.還有實在找不出的時候,就去查看目錄,一級一級的往下找,總能找到你想要的.