今天有朋友叫我帮他写一个右键菜单，我看中午有空，就把它写了一个，有些代码是别人的，我只是改良了一下，贴在这里，以后自己看也不错啊
这是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>
分享到：
相关推荐
一、JavaScript右键菜单的基本原理 在网页上，右键点击事件通常是浏览器默认行为的一部分，如选择文字或打开上下文菜单。然而，通过JavaScript，我们可以自定义这个行为，创建一个完全符合我们设计需求的右键菜单。...
本文将深入探讨如何使用JavaScript实现右键菜单，特别是如何动态添加菜单项，并在菜单项中添加图标、文本以及处理点击事件。此外，我们还将讨论在不同浏览器（如IE、Firefox和Chrome）中的兼容性问题。 首先，右键...
JavaScript 右键菜单是一种常见的网页交互功能，它允许用户在网页元素上点击鼠标右键时弹出自定义的上下文菜单。这样的功能可以提供额外的操作选项，增强用户体验。本教程将深入探讨如何使用 JavaScript 实现这一...
在提供的压缩包文件中，`右键菜单设置2.html`可能是包含上述代码的一个示例网页，而`youjian.js`可能是存放JavaScript代码的外部文件。通过学习这些文件，你可以更深入地了解实际应用中的实现方式。
这次我们要分享的也是一款JavaScript右键菜单插件，它的外观是基于Bootstrap的，因此UI比之前那款要漂亮许多，另外这款右键菜单插件也支持自定义区域菜单显示功能，你可以在初始化的时候指定需要弹出菜单的网页区域...
### 知识点详解：创建一个简洁高效的JavaScript右键菜单 #### 一、理解JavaScript右键菜单的概念 右键菜单，或称为上下文菜单，是在用户界面设计中常见的一种交互方式，通过鼠标右键点击来展示一系列选项或操作。...
在HTML+JavaScript右键菜单的实现中，JSP可能被用作后端服务，处理与菜单相关的数据请求或逻辑，例如根据用户状态或权限动态生成菜单项。 实现步骤如下： 1. 创建HTML结构：在HTML文件中，定义一个用于存放菜单的...
在JavaScript（JS）中，自定义右键菜单是一项常见的需求，尤其在开发Web应用程序时，为了提供更加个性化和功能丰富的用户体验。默认情况下，浏览器提供的右键菜单只包含基本的选项，如“复制”、“粘贴”等。通过...
这个简单的JavaScript右键菜单解决方案的优点在于其灵活性和效率。由于代码量少，且菜单项完全由开发者自行定义，可以轻松地根据项目需求进行定制。同时，它避免了引入大型库或插件的开销，适合小型项目或对性能有...
一、JavaScript右键菜单的基本原理 在HTML中，右键点击事件通常不会触发任何默认行为，因此开发者可以利用这个机会创建自己的右键菜单。JavaScript通过监听`contextmenu`事件来捕获用户的右键点击操作。当这个事件...
在"js树形菜单加右键菜单"这个项目中，我们可以看到两个关键组件的结合。代码文件`code.htm`很可能是实现这一功能的HTML页面，它可能包含了树形菜单的基本结构和右键菜单的触发器。CSS文件`css`则负责定义样式，包括...
### JavaScript右键菜单知识点解析 #### 一、项目概述 本项目主要介绍了一种通过JavaScript实现的右键菜单功能，该功能旨在为用户提供一个便捷、实用的上下文菜单选项。菜单项包括创建、修改和删除等功能，用户可以...
本项目聚焦于利用高德地图js-api实现绘制覆盖物，以及自定义右键菜单的功能。 首先，我们来探讨“绘制覆盖物”这一概念。在高德地图API中，覆盖物是指可以在地图上绘制的各种图形，如点、线、面等。在这个项目中，...
### 漂亮的JavaScript右键菜单代码：深入解析与应用 #### 一、引言 在网页开发中，右键菜单（上下文菜单）是一个常见的功能，它为用户提供了一个直观且便捷的操作方式。本文将深入分析一个用JavaScript实现的漂亮...
【dtree动态树】是一种基于...同时，JavaScript右键菜单可以根据用户的权限和上下文提供个性化的操作，如编辑、删除、复制等。通过结合dtree和JavaScript右键菜单，开发者可以创建出功能丰富的交互式Web界面。
js实现右键菜单效果，测试可用（源代码）
在标题和描述中提到的"Web右键菜单 很不错的右键菜单"可能是指一个定制的、功能丰富的JavaScript插件或库，用于增强网站的用户体验。 一、Web右键菜单的重要性 1. 用户体验：默认的浏览器右键菜单虽然基础，但可能...