当前位置：文江博客话题详情

右键单击上下文菜单 jquery

发布于 2024-10-13 04:15:06 字数 56 浏览 2 评论 0原文

有人有 jquery 上下文菜单的代码吗？只需要在按下鼠标右键时在指针位置弹出一个 div 即可。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

年少掌心 2024-10-20 04:15:06

这是我发现的：

使用 Jquery 和 asp.net 的右键单击上下文菜单 - 代码项目文章

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

有趣的是， dogo 库有一个标准的 UI 小部件集，上下文菜单是该标准的一部分UI 设置。（dojo 库非常漂亮，具有标准外观）

Dojo 是一个独立的 javascript 库，就像 JQuery。不确定 dojo 与 jquery 的兼容性如何，但是如果您愿意，有一些方法可以让它们一起工作。

主啊谷歌给了我大部分答案;)

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

回复收藏 0 原文

り繁华旳梦境 2024-10-20 04:15:06

这是一个插件：
jQuery 上下文菜单

回复收藏 0 原文

病毒体 2024-10-20 04:15:06

这可以通过使用 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>

This can easily be achieved by using the event listener in jQuery, here is a clean and fast way of doing it:

//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 原文

好听的两个字的网名 2024-10-20 04:15:06

您可以使用的另一个插件是我开发的，名为 Audero 上下文菜单。

回复收藏 0 原文

柳絮泡泡 2024-10-20 04:15:06

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

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

回复收藏 0 原文

~没有更多了~