Implementation method of right-click function in web page using contextMenu

This article introduces a solution to implement the right-click function in a web page - contextMenu.

1.Download

Download link

https://github.com/swisnl/jQuery-contextMenu

Download to get the compressed file jQuery-contextMenu-master.zip

After unzipping, use the css, js in the dist directory.

2Usage method

Usage steps:

(1) Refer to css, js.

(2) html, js code.

Simple example as follows:

Code Example test.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">-8">
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet"/>
<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
</head>
<body>
<span class="context--one btn btn-neutral">right click me</span>
<script>
  $(function() {
    $.contextMenu({
      selector: '.context--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--icon context--icon-quit';
        }}
      }
    });
    $('.context--one
      console.log('clicked', this);
    }  
  });
</script>
</body>
</html>

Illustration:

3.Demo and Document

https://swisnl.github.io/jQuery-contextMenu/demo.html
http://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.html

The above-mentioned is the implementation method of the right-click function in the web page introduced by the editor, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Here, I also want to express my heartfelt thanks to everyone for their support of the Yell Tutorial website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not undergo manual editing, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w.3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial