熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

自定義右鍵菜單代碼詳解

2013-11-15 09:49:08  來源: JSP教程 
< style >
< !
/*定義菜單方框的樣式*/
skin {
position:absolute;
textalign:left;
width:px; /*寬度可以根據實際的菜單項目名稱的長度進行適當地調整*/
border:px solid black;
backgroundcolor:menu; /*菜單的背景顏色方案這裡選擇了系統默認的菜單顏色*/
fontfamily:Verdana;
lineheight:px;
cursor:default;
visibility:hidden; /*初始時設置為不可見*/
}
/*定義菜單方框的樣式*/
skin {
cursor:default;
font:menutext;
position:absolute;
textalign:left;
fontfamily: Arial Helvetica sansserif;
fontsize: pt;
width:px; /*寬度可以根據實際的菜單項目名稱的長度進行適當地調整*/
backgroundcolor:menu; /*菜單的背景顏色方案這裡選擇了系統默認的菜單顏色*/
border: solid buttonface;
visibility:hidden; /*初始時設置為不可見*/
border: outset buttonhighlight;
}

/*定義菜單條的顯示樣式*/ padding-left:15px; /*左間距*/
padding-right:10px; /*右間距*/
}
-- >
< /style >

< SCRIPT LANGUAGE="JavaScript1.2" >

< !--
//定義菜單顯示的外觀,可以從上面定義的2種格式中選擇其一
var menuskin = "skin1";
//是否在浏覽器窗口的狀態行中顯示菜單項目條對應的鏈接字符串
var display_url = 0;

<b>function showmenuie5() {</b>
//顯示菜單

//獲取當前鼠標右鍵按下後的位置,據此定義菜單顯示的位置
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;

//如果從鼠標位置到窗口右邊的空間小於菜單的寬度,就定位菜單的左坐標(Left)
為當前鼠標位置向左一個菜單寬度
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
//否則,就定位菜單的左坐標為當前鼠標位置
ie5menu.style.left = document.body.scrollLeft + event.clientX;

//如果從鼠標位置到窗口下邊的空間小於菜單的高度,就定位菜單的上坐標(Top)
為當前鼠標位置向上一個菜單高度
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
//否則,就定位菜單的上坐標為當前鼠標位置
ie5menu.style.top = document.body.scrollTop + event.clientY;

//設置菜單可見
ie5menu.style.visibility = "visible";
return false;
}</pre>
<p><pre >
<b>function hidemenuie5() </b>{
//隱藏菜單
//很簡單,設置visibility為hidden就OK!
ie5menu.style.visibility = "hidden";
}
<b>function highlightie5() </b>{
//高亮度鼠標經過的菜單條項目
//如果鼠標經過的對象是menuitems,就重新設置背景色與前景色
//event.srcElement.className表示事件來自對象的名稱,必須首先判斷這個值,這很重要!
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.lor = "white";
//將鏈接信息顯示到狀態行
//event.srcElement.url表示事件來自對象表示的鏈接URL
if (display_url)
window.status = event.srcElement.url;
}
}
<b>function lowlightie5() </b>{
//恢復菜單條項目的正常顯示
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.lor = "black";
window.status = "";
}
}

<b>function jumptoie5() </b>{
//轉到新的鏈接位置
if (event.srcElement.className == "menuitems") {
//如果存在打開鏈接的目標窗口,就在那個窗口中打開鏈接
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
//否則,在當前窗口打開鏈接
window.location = event.srcElement.url;
}
}
// End -- >
< /script >
< /HEAD >
< BODY >
< center >< h3 >在空白處點擊鼠標右鍵,猜猜會看到什麼 ?< /h3 >< /center >< br >< br >
//定義菜單方框層ie5ment,並定義其顯示樣式以及相關的3個監測事件
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();" >

//定義其中的菜單條項目
//根據你的需要,在這裡添加其他的菜單條名稱以及相應的鏈接URL
< div class="menuitems" url="javascript:history.back();" >後退< /div >
< div class="menuitems" url="javascript:history.forward();" >前進< /div >
< hr >
< div class="menuitems" url="" >ChinaByte網絡學院< /div >
< div class="menuitems" url="" >ChinaByte專欄天地< /div >
< /div >
//頁面加載後,首先執行的初始化腳本程序
< script language="JavaScript1.2" >
//如果當前浏覽器是Internet Explorer,document.all就返回真
if (document.all && window.print) {

//選擇菜單方塊的顯示樣式
ie5menu.className = menuskin;

//重定向鼠標右鍵事件的處理過程為自定義程序showmenuie5
document.oncontextmenu = showmenuie5;

//重定向鼠標左鍵事件的處理過程為自定義程序hidemenuie5
document.body.onclick = hidemenuie5;
}
< /script >
< /body>< /html>
</pre>
<P>   <b>演示效果</b></p>
<P>   OK!看了上面代碼的詳細解讀,你是否領會了其中的技巧?軟件真是無所不能,是嗎?</p>
<P>   想要看看到底是怎樣的神奇效果嗎?不要猶豫,請點擊<a _blank">這裡</a>!</p>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19166.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.