编程 Javascript

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

Posted in Javascript onFebruary 20, 2017

本文介绍一种网页中实现右键功能的方案?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 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>

效果图：

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

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的使用

- Author -

lanyang123456

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)

Apr 02 Javascript

js实现右下角可关闭最小化div(可用于展示推荐内容)

Jun 24 Javascript

js清除input中type等于file的值域(示例代码)

Dec 24 Javascript

学习jQuey中的return false

Dec 18 Javascript

浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

Feb 06 Javascript

Vue form 表单提交+ajax异步请求+分页效果

Apr 22 Javascript

Angular2 组件通信的实例代码

Jun 23 Javascript

微信小程序实现刷脸登录

May 25 Javascript

layer弹出层全屏及关闭方法

Aug 17 Javascript

Vue+Django项目部署详解

May 30 Javascript

jquery实现简单自动轮播图效果

Jul 29 jQuery

vue如何实现关闭对话框后刷新列表

Apr 08 Vue.js

使用contextMenu插件实现Bootstrap table弹出右键菜单

Feb 20 #Javascript

Angular.js跨controller实现参数传递的两种方法

Feb 20 #Javascript

Bootstrap table右键功能实现方法

Feb 20 #Javascript

BootstrapTable refresh 方法使用实例简单介绍

Feb 20 #Javascript

Bootstrap table 定制提示语的加载过程

Feb 20 #Javascript

bootstrapValidator 重新启用提交按钮的方法

Feb 20 #Javascript

原生js实现轮播图的示例代码

Feb 20 #Javascript