<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery实现右键菜单 - web前端网</title>
<style>
body{padding:0;margin:0;font:normal 12px/25px "\5FAE\8F6F\96C5\9ED1";color:#333;}
ul,li{margin:0;padding:0;}
li{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover{color:#008000;}
#class-list{width:200px;margin:100px;padding:10px;border:1px solid #DDD;border-radius:5px;}
#class-list li{text-indent:10px;margin-bottom:1px;}
#class-list li a{display:block;}
#class-list li a:hover,#class-list li.an a,#menu li a:hover{background:#F4F4F4;color:#008000;}
#menu{width:50px;display:none;position:absolute;top:0;left:0;padding:5px;z-index:100;}
#menu ul{background:#FFF;border-radius:5px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}
#menu ul li{line-height:30px;border-bottom:1px solid #F2F2F2;text-align:center;}
#menu ul li a{display:block;}
#menu ul li a:hover{background:#FAFAFA;}
</style>
</head>
<body>
<div id="class-list">
<ul>
<li><a href="http://www.web277.com/doc/" target="_blank">前端文档</a></li>
<li><a href="http://www.web277.com/sj/" target="_blank">前端设计</a></li>
<li><a href="http://www.web277.com/xc/" target="_blank">xHTML+CSS</a></li>
<li><a href="http://www.web277.com/hc/" target="_blank">HTML5+CSS3</a></li>
<li><a href="http://www.web277.com/js/" target="_blank">Javascript</a></li>
<li><a href="http://www.web277.com/jq/" target="_blank">jQurey</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="http://www.web277.com" target="_blank">修改</a></li>
<li><a href="http://www.web277.com" target="_blank">生成</a></li>
<li><a href="http://www.web277.com" target="_blank">预览</a></li>
</ul>
</div>
</body>
</html>
<script src='http://static.w3cfuns.com/js/jQuery/library/jquery-1.7.2.min.js?v=20121228'></script>
<script>
$(function(){
$("#class-list").on("contextmenu","li",function(e){
if(typeof e.preventDefault === "function"){
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
$(this).addClass("an").siblings("li").removeClass("an")
$("#menu").css({"left":e.clientX,"top":e.clientY}).fadeIn()
})
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest("#class-list").length == 0){
$("#menu").hide()
$("#class-list li.an").removeClass("an")
}
})
})
</script>
分享到：
相关推荐
本示例主要探讨如何在WPF和WinForm应用中调用系统、资源管理器及桌面的右键菜单，以增强用户交互体验。 首先，让我们深入理解一下这两个技术： 1. **WPF**：作为.NET Framework的一部分，WPF引入了基于XAML的声明...
标题中的“右键菜单修复工具箱”是指一系列用于解决Windows操作系统中右键菜单问题的软件集合。这些工具通常包括各种修复功能，旨在帮助用户恢复或调整桌面、"计算机"（我的电脑）以及其他位置的右键点击菜单选项。 ...
在Windows操作系统中，右键菜单是用户与系统交互的重要途径之一。它提供了快速访问常用功能的途径，而“动态及静态添加右键菜单策略”则是关于如何扩展这一功能的两个不同实现方式。本文将深入探讨这两种策略，并...
在Windows操作系统中，桌面右键菜单是我们经常使用的功能，它提供了快速访问常用操作的途径。然而，随着时间的推移和各种软件的安装，桌面右键菜单可能会变得冗余且混乱，充斥着许多不常用或者不必要的选项。这不仅...
在Windows 7和Windows 10系统中，右键菜单是用户进行快速操作的重要途径，例如复制、粘贴、重命名、属性查看等。然而，随着时间的推移和软件的安装，右键菜单可能会变得拥挤不堪，含有许多不常用或者无用的选项，这...
beyondcompare加入右键菜单方法 Beyond Compare是一款功能强大的文件比较工具，它可以帮助用户快速比较和同步文件。但是，默认情况下，Beyond Compare并不提供直接在右键菜单中访问的功能。这就需要用户手动打开...
在本场景中，“pb9做的右键菜单”是指使用PowerBuilder 9创建的自定义Windows操作系统右键快捷菜单功能。 右键菜单，也称为上下文菜单，是用户在鼠标右键点击时弹出的一系列操作选项，为用户提供快速访问常用功能的...
在Flex编程中，右键菜单（ContextMenu）是一个重要的交互元素，它可以为用户提供额外的操作选项。在给定的实例中，我们看到如何在Flex应用中创建并添加自定义的右键菜单。下面将详细解释这个实例中的关键知识点。 ...
在标题和描述中提到的"Web右键菜单 很不错的右键菜单"可能是指一个定制的、功能丰富的JavaScript插件或库，用于增强网站的用户体验。 一、Web右键菜单的重要性 1. 用户体验：默认的浏览器右键菜单虽然基础，但可能...
### 删除右键菜单中的选项——全面指南 #### 核心概念 右键菜单是我们日常使用计算机过程中频繁接触的功能之一，它提供了对文件、文件夹甚至桌面背景等项目的快速操作选项。然而，随着软件安装和卸载的过程，右键...
VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键菜单VC++ 外壳扩展编程之windows右键...
在IT行业中，树形菜单和右键菜单是两种常见的用户界面元素，它们为用户提供了一种组织和交互数据的有效方式。本文将深入探讨这两种菜单的概念、实现原理以及它们在实际项目中的应用，特别是如何在JavaScript环境下...
在Windows 7操作系统中，右键菜单是用户访问常用功能的快捷方式，它包含了大量快捷操作，如“新建”、“属性”、“发送到”等。然而，随着时间的推移，安装的各种软件可能会向右键菜单添加自定义项，导致右键菜单变...
标题“echarts右键菜单实例 --- 不修改源码”表明我们将探讨如何在ECharts图表上添加右键菜单，而无需直接修改ECharts的源代码。这意味着我们将通过ECharts的API和事件监听来实现这一功能，这是一个常见的最佳实践，...
右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap...
标题中的“右键菜单修改小工具绝对安全”指的是一个专门用于调整Windows系统右键菜单的软件，它允许用户自定义和优化右键点击文件或文件夹时出现的上下文菜单。这种工具通常是为了提高用户的工作效率，让用户可以更...
C#在gridview添加右键菜单（C#源码） C#在gridview添加右键菜单（C#源码） C#在gridview添加右键菜单（C#源码） C#在gridview添加右键菜单（C#源码） C#在gridview添加右键菜单（C#源码） C#在gridview添加右键菜单...
在本例中，我们将探讨如何在易语言的编辑框中添加右键菜单项，这将增强用户的交互体验，使用户能够通过右键点击编辑框执行特定的功能。 首先，我们需要理解易语言中的“右键菜单项”是如何工作的。在Windows应用...
在Windows操作系统中，右键菜单是用户日常操作中不可或缺的一部分，它提供了快速访问常用功能的途径。"右键菜单编辑"是一种工具，允许用户自定义和管理计算机右键菜单中的选项，以提高效率并根据个人需求定制化界面...
本文将深入探讨如何实现这一功能，并且关注于在SVG（可缩放矢量图形）中自定义右键菜单。 首先，我们要理解为何要禁止鼠标右键。在网页上，鼠标右键通常会弹出一个包含诸如“查看源代码”、“保存图片”等选项的...