今天有朋友叫我帮他写一个右键菜单,我看中午有空,就把它写了一个,有些代码是别人的,我只是改良了一下,贴在这里,以后自己看也不错啊
这是js代码
// JavaScript Document
//window.onload = ShowRightMenu
document.onclick = HideMenu;
window.onload=function(){
ShowRightMenu(); //一开始就加载
}
function evtMenu1()
{
HideMenu();
alert('Menu1');
}
function evtMenu2()
{
HideMenu();
}
function evtMenuOnmouseMove()
{
this.style.backgroundColor='#8AAD77';
this.style.paddingLeft='30px';
}
function evtOnMouseOut()
{
this.style.backgroundColor='#FAFFF8';
}
function CreateMenu()
{
var div_Menu = document.createElement("Div");
div_Menu.id = "div_RightMenu";
div_Menu.className = "div_RightMenu";
var div_Menu1 = document.createElement("Div");
div_Menu1.className = "divMenuItem";
div_Menu1.onclick = evtMenu1; //绑定每个右击菜单事件
div_Menu1.onmousemove = evtMenuOnmouseMove;
div_Menu1.onmouseout = evtOnMouseOut;
div_Menu1.innerHTML = "我的首页";
var div_Menu2 = document.createElement("Div");
div_Menu2.className = "divMenuItem";
div_Menu2.onclick = evtMenu2;
div_Menu2.onmousemove = evtMenuOnmouseMove
div_Menu2.onmouseout = evtOnMouseOut
div_Menu2.innerHTML = "删除记录";
var div_Menu3 = document.createElement("Div");
div_Menu3.className = "divMenuItem";
div_Menu3.onmousemove = evtMenuOnmouseMove;
div_Menu3.onmouseout = evtOnMouseOut;
div_Menu3.innerHTML = "详细信息";
var div_Menu4 = document.createElement("Div");
div_Menu4.className = "divMenuItem";
div_Menu4.onmousemove = evtMenuOnmouseMove;
div_Menu4.onmouseout = evtOnMouseOut;
div_Menu4.innerHTML = "刷新";
var Hr1 = document.createElement("Hr");
var div_Menu5 = document.createElement("Div");
div_Menu5.className = "divMenuItem";
div_Menu5.onmousemove = evtMenuOnmouseMove;
div_Menu5.onmouseout = evtOnMouseOut;
div_Menu5.innerHTML = "加入收藏夹";
var div_Menu6 = document.createElement("Div");
div_Menu6.className = "divMenuItem";
div_Menu6.onmousemove = evtMenuOnmouseMove;
div_Menu6.onmouseout = evtOnMouseOut;
div_Menu6.innerHTML = "复制";
var div_Menu7 = document.createElement("Div");
div_Menu7.className = "divMenuItem";
div_Menu7.onmousemove = evtMenuOnmouseMove;
div_Menu7.onmouseout = evtOnMouseOut;
div_Menu7.innerHTML = "全选";
var Hr2 = document.createElement("Hr");
var div_Menu8 = document.createElement("Div");
div_Menu8.className = "divMenuItem";
div_Menu8.onmousemove = evtMenuOnmouseMove;
div_Menu8.onmouseout = evtOnMouseOut;
div_Menu8.innerHTML = "联系作者";
var div_Menu9 = document.createElement("Div");
div_Menu9.className = "divMenuItem";
div_Menu9.onmousemove = evtMenuOnmouseMove;
div_Menu9.onmouseout = evtOnMouseOut;
div_Menu9.innerHTML = "关于此功能";
var div_Menu10 = document.createElement("Div");
div_Menu10.className = "divMenuItem";
div_Menu10.style.marginBottom = 0;
div_Menu10.onmousemove = evtMenuOnmouseMove;
div_Menu10.onmouseout = evtOnMouseOut;
div_Menu10.innerHTML = "属性";
div_Menu.appendChild(div_Menu1);
div_Menu.appendChild(div_Menu2);
div_Menu.appendChild(div_Menu3);
div_Menu.appendChild(div_Menu4);
div_Menu.appendChild(Hr1);
div_Menu.appendChild(div_Menu5);
div_Menu.appendChild(div_Menu6);
div_Menu.appendChild(div_Menu7);
div_Menu.appendChild(Hr2);
div_Menu.appendChild(div_Menu8);
div_Menu.appendChild(div_Menu9);
div_Menu.appendChild(div_Menu10);
document.body.appendChild(div_Menu);
}
function ShowRightMenu()
{
if($("div_RightMenu") == null)
{ //$("#bindSrc")
CreateMenu();
$("bindSrc").oncontextmenu = ShowMenu
document.onclick = HideMenu
}
else
{
alert(2);
$("bindSrc").oncontextmenu = ShowMenu
document.onclick = HideMenu
}
}
// 判断客户端浏览器
function IsIE()
{
if (navigator.appName=="Microsoft Internet Explorer")
{
return true;
}
else
{
return false;
}
}
function ShowMenu()
{
if (IsIE())
{
document.onclick = HideMenu;
// $("hideMenu_DeleteRow").value = parm;
var redge=document.body.clientWidth-event.clientX;
var bedge=document.body.clientHeight-event.clientY;
var menu = $("div_RightMenu");
if (redge<menu.offsetWidth)
{
menu.style.left=20; //document.body.scrollLeft + event.clientX-menu.offsetWidth
}
else
{
menu.style.left=50 //document.body.scrollLeft + event.clientX
//这里有改动
// menu.style.visibility = "visible";//页面底端突出
menu.style.display = "block";
}
if (bedge<menu.offsetHeight)
{
menu.style.top=100; //document.body.scrollTop + event.clientY - menu.offsetHeight
}
else
{
menu.style.top =150; //document.body.scrollTop + event.clientY
// menu.style.visibility = "visible";
menu.style.display = "block";
}
}
return false;
}
function HideMenu()
{
if (IsIE()) $("div_RightMenu").style.display="none";
}
function $(gID)
{
return document.getElementById(gID);
}
//绑定右键菜单
function bindMenu(){
ShowRightMenu();
}
这是html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>右键菜单</title>
<style type="text/css">
.div_RightMenu
{
z-index:30000;
text-align:left;
cursor: default;
position: absolute;
background-color:#FAFFF8;
width:120px;
height:auto;
border: 1px solid #333333;
display:none;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#333333,Direction=120,strength=5);
}
.divMenuItem
{
height:17px;
color:Black;
font-family:宋体;
vertical-align:middle;
font-size:10pt;
margin-bottom:3px;
cursor:hand;
padding-left:30px;
padding-top:2px;
}
</style>
<script type="text/javascript" src="js/jsRightMenu.js"></script>
</head>
<body >
<a href="#" id="bindSrc" >
<b>点击右键</b>
</a>
</body>
</html>
分享到:
相关推荐
兼容FF和IE Js右键菜单,js菜单,漂亮的Js右键导航,好用的Js右键菜单
javascript 右键菜单,比较好用,自定义的,可以根据需要自己改动
这次我们要分享的也是一款JavaScript右键菜单插件,它的外观是基于Bootstrap的,因此UI比之前那款要漂亮许多,另外这款右键菜单插件也支持自定义区域菜单显示功能,你可以在初始化的时候指定需要弹出菜单的网页区域...
HTNL+javaScript右键菜单,HTNL+javaScript右键菜单,HTNL+javaScript右键菜单
js右键菜单,测试通过IE,火狐,Google,菜单项由js动态添加,在菜单项中可添加图标,文本,菜单项点击事件,以及分隔线
通过JS来设置鼠标的右键..使鼠标右键能有自己想要的功能..
js自定义右键菜单
一个非常简洁高效的JS右键菜单
js实现右键菜单效果,测试可用(源代码)
javascript右键菜单,兼容各种浏览器
该文档利用javascript 实现了完美的右键菜单。 界面清晰淡雅,优越美观
dtree动态树+Javascript右键菜单
javascript右键菜单控件,树控件,日期控件,有详细说明并有实例演示 树控件 右键菜单 日期控件 树控件:实现树型数据结构的基本展现方式,提供树节点的查找和维护 右键菜单:提供独立的右键菜单组件,可...
使用JS产生右键菜单
Javascript右键菜单,JQuery 实现 本人网络收集 提供自己使用和研究 /**得到一个对象的所有属性 var attrs="t:"; for(var attr in t) { attrs+=attr; attrs+="|"; alert("inst的"+attr+"属性:"+t[attr]); } alert...
javascript仿window xp鼠标右键菜单功能