jquery.contextMenu 鼠标右键

来源：互联网发布：路由器访客网络限速编辑：程序博客网时间：2024/05/18 04:01

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

下载

下载地址
https://github.com/swisnl/jQuery-contextMenu

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

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

使用方法

使用步骤：

(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="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>

效果

这里写图片描述

阅读全文

0 0