网页中右键功能的实现--- contextMenu的使用

最新推荐文章于 2024-09-25 08:28:55 发布

翔云123456

最新推荐文章于 2024-09-25 08:28:55 发布

阅读量3.3k

点赞数

分类专栏： Javascript html 文章标签： contextmenu javascript

本文链接：https://blog.csdn.net/lanyang123456/article/details/55006595

版权

Javascript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

15 篇文章 0 订阅

订阅专栏

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