网页中右键功能的实现方法之contextMenu的使用

每天坐在教室里,但眼神总是看着窗外的风景,不知不觉的默默发呆。我一直急速前行,穿梭于人人之间。试图借应接不暇的风景让我褪去对你的思念。

本文介绍一种网页中实现右键功能的方案–contextMenu。

1.下载

下载地址

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

下载得到压缩文件jQuery-contextMenu-master.zip

解压后,使用dist目录下css、js。

2.使用方法

使用步骤:

(1) 引用css、js。

(2) html、js代码。

简单例子如下:

代码test.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="nofollow noopener noreferrer" 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-menu-one btn btn-neutral">right click me</span>
<script>
  $(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>

效果图:

3.Demo and Document

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

以上所述是小编给大家介绍的网页中右键功能的实现方法之contextMenu的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上就是网页中右键功能的实现方法之contextMenu的使用。这世间所有的相遇,都是有原因的,每一次遇见,都是一个心愿,也许,前世有未了的情缘,所以,此生才能得以见面,所有的遇见,皆是因为相欠。更多关于网页中右键功能的实现方法之contextMenu的使用请关注haodaima.com其它相关文章!

标签: 右键 contextMenu