为我的web应用程序创建自定义右键单击上下文菜单
为我的web应用程序创建自定义右键单击上下文菜单
提问于 2010-12-21 09:37:23
我有一些像google-docs和map-quest这样的网站，当你点击右键时，它们都有自定义的下拉菜单。不知何故，它们覆盖了浏览器的下拉菜单行为，我现在确定它们是如何做到这一点的。我找到了一个可以做到这一点的jQuery plugin，但我仍然对一些事情感到好奇：
- 这是如何工作的？浏览器的下拉菜单是否真的被覆盖了，或者只是模拟了一下效果？如果是这样的话，是怎么做的？
- 插件抽象了什么？幕后发生了什么？
- 这是实现这种效果的唯一方法吗？
回答 9
Stack Overflow用户
发布于 2013-12-09 20:58:09
我知道这个问题很老了，但我只是想出了同样的问题，并自己解决了它，所以我回答了这个问题，以防有人像我一样通过谷歌找到这个问题。我的解决方案基于@Andrew的解决方案，但基本上后来都进行了修改。
编辑：看到这个最近很受欢迎，我决定也更新样式，让它看起来更像2014年，而不是Windows95。我修复了@Quantico和@Trengot的错误，所以现在它是一个更可靠的答案。
EDIT 2：我用StackSnippets设置了它，因为它们是一个非常酷的新功能。我把留在这里作为参考(点击第四个面板看看它们是如何工作的)。
新的堆栈代码段：
// JAVASCRIPT (jQuery)
// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "third": alert("third"); break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});/* CSS3 */
/* The whole thing */
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
padding: 0;
}
/* Each of the items in the list */
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
list-style-type: none;
transition: all .3s ease;
user-select: none;
}
.custom-menu li:hover {
background-color: #DEF;
}<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<ul class='custom-menu'>
<li data-action="first">First thing</li>
<li data-action="second">Second thing</li>
<li data-action="third">Third thing</li>
</ul>
<!-- Not needed, only for making it clickable on StackOverflow -->
Right click me
注意:你可能会看到一些小错误(离光标很远的下拉列表等)，请确保它在jsfiddle中工作，因为这比StackSnippets更类似于你的网页。
Stack Overflow用户
发布于 2010-12-22 01:37:47
正如Adrian所说，插件将以同样的方式工作。您将需要三个基本部分：
1：'contextmenu'事件的事件处理程序：
$(document).bind("contextmenu", function(event) {
event.preventDefault();
$("<div class='custom-menu'>Custom menu</div>")
.appendTo("body")
.css({top: event.pageY + "px", left: event.pageX + "px"});
});在这里，您可以将事件处理程序绑定到要显示其菜单的任何选择器。我已经选择了整个文档。
2：'click'事件的事件处理程序(关闭自定义菜单)：
$(document).bind("click", function(event) {
$("div.custom-menu").hide();
});3:控制菜单位置的CSS：
.custom-menu {
z-index:1000;
position: absolute;
background-color:#C0C0C0;
border: 1px solid black;
padding: 2px;
}CSS的重要之处在于包含了z-index和position: absolute
将所有这些都封装在一个漂亮的jQuery插件中并不是太难。
你可以在这里看到一个简单的演示：http://jsfiddle.net/andrewwhitaker/fELma/
Stack Overflow用户
发布于 2016-06-09 17:55:03
<!DOCTYPE html>
<html>
<head>
<title>Right Click</title>
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>
</head>
<body>
<span class="context-menu-one" style="border:solid 1px black; padding:5px;">Right Click Me</span>
<script type="text/javascript">
$(function() {
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
copy: {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: function(){
return 'context-menu-icon context-menu-icon-quit';
}}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4495626
复制相关文章
相似问题