logo标签列表

右键菜单jquery

jqueryjquery-pluginscontextmenu
8

有人有 JQuery 上下文菜单的代码吗？只需要在鼠标右键按下时弹出一个DIV，位置在指针处。

你做过谷歌搜索吗？有许多脚本可以指出这一点。 - Sander
我发现了一个非常简单的脚本可以做到这一点（来自另一个Stack Overflow问题）：https://dev59.com/nW855IYBdhLWcg3wKxDc#4502207 - Anderson Green
5个回答
7

这是我找到的:

使用Jquery和asp.net创建右键上下文菜单 - Code Project文章

Jquery网站上标记为右键菜单的插件

有趣的是，dojo库有一个标准UI小部件集合, 上下文菜单是该标准UI集合的一部分。（Dojo库具有漂亮的标准外观）

Dojo是一个单独的javascript库，就像JQuery一样。不确定dojo与jquery完全兼容的程度，但如果您想要将它们同时使用，有方法可以让它们共存。

上帝谷歌给了我大部分的答案 ;)

以下类似的SO问题可能会有所帮助：
jQuery右键上下文菜单帮助！
jquery上下文菜单插件-右键单击事件类型在哪里？
JavaScript：捕获右键单击并仅在某个元素内禁用菜单

5
链接已失效 - BingLi224
2

使用jQuery中的事件监听器可以轻松实现这一点，以下是一种简洁快速的方法：

//Now add the jQuery
$(document).ready(function() { //Just starting up here
  var menu = $('.menu');//get the menu
  $(document).on('contextmenu', function(e) {//What this does is simply; if right-click, run function(contains an event)
    e.preventDefault();//Prevent the default action: the normal right-click-menu to show
    menu.css({
      display: 'block',//show the menu
      top: e.pageY,//make the menu be where you click (y)
      left: e.pageX//make the menu be where you click (x)
    });
  });
  $(document).click(function() { //When you left-click
    menu.css({ display: 'none' });//Hide the menu
  });
});
/* just some css to display it */
.menu {
  background: #fff;
  width: 60px;
  padding: 3px 10px;
  box-shadow: 0 0 10px -3px rgba(0, 0, 0, .3);
  border: 1px solid #ccc;
  display: none;
  position: absolute;//this is important
}
<!-- jQuery CDN --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add some HTML for the menu -->
<div class="menu">
  <p>Option 1</p>
  <p>Option 2</p>
</div>

0
0

<!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>

仅提供代码的答案在我看来并不是答案 - 添加解释，以便原帖作者和未来读者可以从中学习。 - treyBake
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接