自定义网页右键菜单
2008-05-01 06:26
429 查看
<html>
<head>
<meta content="Microsoft FrontPage 4.0" name="GENERATOR">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Cool的右键菜单－51windows.com</title>
<style>#all .menu { background-color: menu; cursor: hand; display: none; font-family: Arial;
font-size: 9pt; color: 800000; left: 0px; overflow: hidden;
position: absolute; top: 0px; border-left: 1px solid #efefef;
border-right: 1px solid #505050; border-top: 1px solid #efefef;
border-bottom: 1px solid #505050; margin: 0pt; padding: 3pt }
#all .menu span { cursor: default; width: 100%; padding-left: 10pt }
#all .menu span.selected { background-color: red; background-repeat: repeat; background-attachment:
scroll; color: white; background-position: 0% }
body { font-family: Verdana; color: #000080; font-size: 9pt }
</style>
<xml id=contextDef>
<xmldata>
<contextmenu id="demo">
<item id="open" value="打开(open)"/>
<item id="back" value="后退(back)"/>
<item id="saveas" value="保存(save)"/>
<item id="f5" value="刷新(refresh)"/>
<item id="exit" value="关闭(shut)"/>
<item id="print" value="打印(print)"/>
<item id="http1" value="海娃在线"/>
<item id="viewsource" value="查看源代码"/>
</contextmenu>
</xmldata>
</xml>
<SCRIPT>
// Define global script variables
var bContextKey=false;
// The fnDetermine function performs most of the work
function fnGetContextID(el) {
while (el!=null) {
if (el.contextmenu) return el.contextmenu
el = el.parentElement
}
return ""
}
function fnDetermine(){
oWorkItem=event.srcElement;
// Proceed if the desired keyboard key is pressed.
if(bContextKey==true){
// If the menu STATUS is false, continue.
if(oContextMenu.getAttribute("status")=="false"){
// Give the menu mouse capture so it can interact better with the page.
oContextMenu.setCapture();
// Relocate the menu to an offset from the mouse position.
oContextMenu.style.top=event.clientY + document.body.scrollTop + 1;
oContextMenu.style.left=event.clientX + document.body.scrollLeft + 1;
oContextMenu.innerHTML="";
// Set its STATUS to true.
var sContext = fnGetContextID(event.srcElement)
if (sContext!="") {
fnPopulate(sContext)
oContextMenu.setAttribute("status","true");
event.returnvalue=false;
}
else
event.returnvalue=true
}
}
else{
// If the keyboard key was not pressed and the menu status is true, continue.
if(oContextMenu.getAttribute("status")=="true"){
// If the object that was clicked has the menu for a parent and it has a COMPONENT attribute equal to "menuitem", continue.
if((oWorkItem.parentElement.id=="oContextMenu")&&(oWorkItem.getAttribute("component")=="menuitem")){
fnFireContext(oWorkItem)
}
// Reset the context menu, release mouse capture, and hide it.
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
oContextMenu.innerHTML="";
event.returnvalue=false;
}
}
}
function fnPopulate(sID) {
var str=""
var elMenuRoot = document.all.contextDef.XMLDocument.childNodes(0).selectSingleNode('contextmenu[@id="' + sID + '"]')
if (elMenuRoot) {
for(var i=0;i<elMenuRoot.childNodes.length;i++)
str+='<span component="menuitem" menuid="' + elMenuRoot.childNodes[i].getAttribute("id") + '" id=oMenuItem' + i + '>' + elMenuRoot.childNodes[i].getAttribute("value") + "</SPAN><BR>"
oContextMenu.innerHTML=str;
oContextMenu.style.display="block";
oContextMenu.style.pixelHeight = oContextMenu.scrollHeight
}
}
function fnFireContext(oItem) {
switch (oItem.menuid) {
case "http1":
location.href = "http://www.51windows.com";
break;
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
case "saveas":
document.execCommand('SaveAs')
break;
case "open":
document.execCommand('open')
break;
case "print":
document.execCommand('print')
break;
case "exit":
location.href = "javascript:window.close()";
break;
case "f5":
location.href = "javascript:location.reload()";
break;
default:
alert("You Selected:/nID: " + oItem.menuid + "/nText: " + oItem.innerText)
}
}
/* The chirp functions provide visual appeal. Notice that they are specific about only changing styles while the mouse is within the client window. This is because setCapture allows the mouse to pick up coordinate values on the window (not the user's screen) and this can throw an error if you try to get a property from an object that isn't recognized. */
function fnChirpOn(){
if((event.clientX>0)&&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = "selected"
}
}
}
function fnChirpOff(){
if((event.clientX>0)&&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = ""
}
}
}
function fnInit(){
if (oContextMenu) {
oContextMenu.style.width=110;
oContextMenu.style.height=document.body.offsetHeight/2;
oContextMenu.style.zIndex=2;
// Setup the basic styles of the context menu.
document.oncontextmenu=fnSuppress;
}
}
function fnInContext(el) {
while (el!=null) {
if (el.id=="oContextMenu") return true
el = el.offsetParent
}
return false
}
function fnSuppress(){
if (!(fnInContext(event.srcElement))) {
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
bContextKey=true;
}
fnDetermine();
bContextKey=false;
}
window.onload = fnInit;
document.onclick = fnDetermine;
</SCRIPT>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
<body bgcolor="menu" id="all" text="#000000" contextmenu="demo">
<div class="menu" id="oContextMenu" onmouseout="fnChirpOff()" onmouseover="fnChirpOn()" status="false" style="width: 147; height: 49">
</div>
<p align="center">请点右键</p>
</body>
</html>
<head>
<meta content="Microsoft FrontPage 4.0" name="GENERATOR">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Cool的右键菜单－51windows.com</title>
<style>#all .menu { background-color: menu; cursor: hand; display: none; font-family: Arial;
font-size: 9pt; color: 800000; left: 0px; overflow: hidden;
position: absolute; top: 0px; border-left: 1px solid #efefef;
border-right: 1px solid #505050; border-top: 1px solid #efefef;
border-bottom: 1px solid #505050; margin: 0pt; padding: 3pt }
#all .menu span { cursor: default; width: 100%; padding-left: 10pt }
#all .menu span.selected { background-color: red; background-repeat: repeat; background-attachment:
scroll; color: white; background-position: 0% }
body { font-family: Verdana; color: #000080; font-size: 9pt }
</style>
<xml id=contextDef>
<xmldata>
<contextmenu id="demo">
<item id="open" value="打开(open)"/>
<item id="back" value="后退(back)"/>
<item id="saveas" value="保存(save)"/>
<item id="f5" value="刷新(refresh)"/>
<item id="exit" value="关闭(shut)"/>
<item id="print" value="打印(print)"/>
<item id="http1" value="海娃在线"/>
<item id="viewsource" value="查看源代码"/>
</contextmenu>
</xmldata>
</xml>
<SCRIPT>
// Define global script variables
var bContextKey=false;
// The fnDetermine function performs most of the work
function fnGetContextID(el) {
while (el!=null) {
if (el.contextmenu) return el.contextmenu
el = el.parentElement
}
return ""
}
function fnDetermine(){
oWorkItem=event.srcElement;
// Proceed if the desired keyboard key is pressed.
if(bContextKey==true){
// If the menu STATUS is false, continue.
if(oContextMenu.getAttribute("status")=="false"){
// Give the menu mouse capture so it can interact better with the page.
oContextMenu.setCapture();
// Relocate the menu to an offset from the mouse position.
oContextMenu.style.top=event.clientY + document.body.scrollTop + 1;
oContextMenu.style.left=event.clientX + document.body.scrollLeft + 1;
oContextMenu.innerHTML="";
// Set its STATUS to true.
var sContext = fnGetContextID(event.srcElement)
if (sContext!="") {
fnPopulate(sContext)
oContextMenu.setAttribute("status","true");
event.returnvalue=false;
}
else
event.returnvalue=true
}
}
else{
// If the keyboard key was not pressed and the menu status is true, continue.
if(oContextMenu.getAttribute("status")=="true"){
// If the object that was clicked has the menu for a parent and it has a COMPONENT attribute equal to "menuitem", continue.
if((oWorkItem.parentElement.id=="oContextMenu")&&(oWorkItem.getAttribute("component")=="menuitem")){
fnFireContext(oWorkItem)
}
// Reset the context menu, release mouse capture, and hide it.
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
oContextMenu.innerHTML="";
event.returnvalue=false;
}
}
}
function fnPopulate(sID) {
var str=""
var elMenuRoot = document.all.contextDef.XMLDocument.childNodes(0).selectSingleNode('contextmenu[@id="' + sID + '"]')
if (elMenuRoot) {
for(var i=0;i<elMenuRoot.childNodes.length;i++)
str+='<span component="menuitem" menuid="' + elMenuRoot.childNodes[i].getAttribute("id") + '" id=oMenuItem' + i + '>' + elMenuRoot.childNodes[i].getAttribute("value") + "</SPAN><BR>"
oContextMenu.innerHTML=str;
oContextMenu.style.display="block";
oContextMenu.style.pixelHeight = oContextMenu.scrollHeight
}
}
function fnFireContext(oItem) {
switch (oItem.menuid) {
case "http1":
location.href = "http://www.51windows.com";
break;
case "viewsource":
location.href = "view-source:" + location.href
break;
case "back":
history.back()
break;
case "saveas":
document.execCommand('SaveAs')
break;
case "open":
document.execCommand('open')
break;
case "print":
document.execCommand('print')
break;
case "exit":
location.href = "javascript:window.close()";
break;
case "f5":
location.href = "javascript:location.reload()";
break;
default:
alert("You Selected:/nID: " + oItem.menuid + "/nText: " + oItem.innerText)
}
}
/* The chirp functions provide visual appeal. Notice that they are specific about only changing styles while the mouse is within the client window. This is because setCapture allows the mouse to pick up coordinate values on the window (not the user's screen) and this can throw an error if you try to get a property from an object that isn't recognized. */
function fnChirpOn(){
if((event.clientX>0)&&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = "selected"
}
}
}
function fnChirpOff(){
if((event.clientX>0)&&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight)){
oWorkItem=event.srcElement;
if(oWorkItem.getAttribute("component")=="menuitem"){
oWorkItem.className = ""
}
}
}
function fnInit(){
if (oContextMenu) {
oContextMenu.style.width=110;
oContextMenu.style.height=document.body.offsetHeight/2;
oContextMenu.style.zIndex=2;
// Setup the basic styles of the context menu.
document.oncontextmenu=fnSuppress;
}
}
function fnInContext(el) {
while (el!=null) {
if (el.id=="oContextMenu") return true
el = el.offsetParent
}
return false
}
function fnSuppress(){
if (!(fnInContext(event.srcElement))) {
oContextMenu.style.display="none";
oContextMenu.setAttribute("status","false");
oContextMenu.releaseCapture();
bContextKey=true;
}
fnDetermine();
bContextKey=false;
}
window.onload = fnInit;
document.onclick = fnDetermine;
</SCRIPT>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
</head>
<body bgcolor="menu" id="all" text="#000000" contextmenu="demo">
<div class="menu" id="oContextMenu" onmouseout="fnChirpOff()" onmouseover="fnChirpOn()" status="false" style="width: 147; height: 49">
</div>
<p align="center">请点右键</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 自定义网页右键菜单
- 网页自定义右键菜单
- 用Popup对象构建自定义的网页右键菜单
- [整理]网页自定义鼠标右键菜单特效
- jquery实现在网页指定区域显示自定义右键菜单效果
- 如何实现网页自定义右键菜单?
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法
- 在网页指定区域显示自定义的右键菜单
- 自定义网页右键弹出菜单
- javascript+css实现自定义网页右键菜单
- jquery实现在网页指定区域显示自定义右键菜单效果
- 自定义网页右键弹出菜单
- Qml实现自定义右键菜单
- IE浏览器右键菜单插件开发（上篇）——自定义一个IE右键菜单项
- Win7如何自定义鼠标右键菜单 添加在此处打开CMD窗口
- 微信自定义菜单view类型获取openid访问网页
- [JavaScript] Ie 右键菜单取网页信息
- javascript鼠标右键菜单自定义效果
- js自定义右键菜单