<html>
<head>
<title>Js 右键菜单</title>
</head>
<script language='javascript'>
//mname是菜单对应的名称，数组的个数必须与下面murl对应
var mname=new Array(
"首 页",
"修 改",
"下 载",
"删 除",
"新 建",
"刷 新"
);
//murl是菜单对应的操作，可以是任意javascript代码，但是要注意不要在里面输入\"，只能用'
//如果要实现跳转可以这样window.location='url';
var murl=new Array(
"window.open('http://www.cn5.cn','_blank','');",
"alert('修改');",
"alert('download');",
"alert('delete');",
"alert('new');",
"alert('refresh');"
);
var ph=18,mwidth=80; //每条选项的高度,菜单的总宽度
var bgc="#eee",txc="black"; //菜单没有选中的背景色和文字色
var cbgc="darkblue",ctxc="white"; //菜单选中的选项背景色和文字色
/****************以下代码请不要修改******************/
var mover = "this.style.background='"+cbgc+"';this.style.color='"+ctxc+"';"
var mout = "this.style.background='"+bgc+"';this.style.color='"+txc+"';"
document.oncontextmenu=function() {
mlay.style.display="";
mlay.style.pixelTop=event.clientY;
mlay.style.pixelLeft=event.clientX;
return false;
}
function showoff(){
mlay.style.display="none";
}
function fresh(){
mlay.style.background=bgc;
mlay.style.color=txc;
mlay.style.width=mwidth;
mlay.style.height=mname.length*ph;
var h="<table width=100% height="+mname.length*ph+"px cellpadding=0 cellspacing=0 border=0>";
var i=0;
for(i=0;i<mname.length;i++) {
h+="<tr align=center height="+ph+" onclick=\""+murl[i]+"\" onMouseover=\""+mover+"\" onMouseout=\""+mout+"\"><td style='font-size:9pt;'>"+mname[i]+"</td></tr>";
}
h+="</table>";
mlay.innerHTML=h;
}
</script>
<body onClick="showoff();" onload="fresh();">
点一下右键看看
<div id="mlay" style="position:absolute;display:none;cursor:default;" onClick="return false;"></div>
</body>
</html>
分享到：
相关推荐
一、JavaScript右键菜单的基本原理 在网页上，右键点击事件通常是浏览器默认行为的一部分，如选择文字或打开上下文菜单。然而，通过JavaScript，我们可以自定义这个行为，创建一个完全符合我们设计需求的右键菜单。...
本文将深入探讨如何使用JavaScript实现右键菜单，特别是如何动态添加菜单项，并在菜单项中添加图标、文本以及处理点击事件。此外，我们还将讨论在不同浏览器（如IE、Firefox和Chrome）中的兼容性问题。 首先，右键...
JavaScript 右键菜单是一种常见的网页交互功能，它允许用户在网页元素上点击鼠标右键时弹出自定义的上下文菜单。这样的功能可以提供额外的操作选项，增强用户体验。本教程将深入探讨如何使用 JavaScript 实现这一...
在提供的压缩包文件中，`右键菜单设置2.html`可能是包含上述代码的一个示例网页，而`youjian.js`可能是存放JavaScript代码的外部文件。通过学习这些文件，你可以更深入地了解实际应用中的实现方式。
这次我们要分享的也是一款JavaScript右键菜单插件，它的外观是基于Bootstrap的，因此UI比之前那款要漂亮许多，另外这款右键菜单插件也支持自定义区域菜单显示功能，你可以在初始化的时候指定需要弹出菜单的网页区域...
js 右键菜单，直接使用，修改方便
### 知识点详解：创建一个简洁高效的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. 用户体验：默认的浏览器右键菜单虽然基础，但可能...