contextMenu.js 使用教程

最新推荐文章于 2024-08-13 08:52:21 发布

汪宾其

最新推荐文章于 2024-08-13 08:52:21 发布

阅读量395

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00537/article/details/141153000

版权

contextMenu.js 使用教程

contextMenu.jscontextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.项目地址:https://gitcode.com/gh_mirrors/co/contextMenu.js

项目介绍

contextMenu.js 是一个用于创建类似 Windows 上下文菜单的 jQuery 插件，支持键盘交互和多种输入类型，可以触发各种事件。该插件允许用户通过右键点击、左键点击、悬停或其他鼠标事件来触发上下文菜单，并且支持触摸设备。它提供了丰富的配置选项，包括子菜单、可选的命令图标等。

项目快速启动

安装

你可以通过 NPM 安装 contextMenu.js，并将其包含在你的构建过程中：

npm install jquery-contextmenu

或者直接从 CDN 加载库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>

基本使用

以下是一个简单的示例，展示如何在你的网页中使用 contextMenu.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contextMenu.js 示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
</head>
<body>
    <div id="target">右键点击这里</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
    <script>
        $(function() {
            $.contextMenu({
                selector: '#target',
                items: {
                    "edit": {name: "编辑", icon: "edit", callback: function(key, options) {
                        alert("编辑");
                    }},
                    "cut": {name: "剪切", icon: "cut", callback: function(key, options) {
                        alert("剪切");
                    }},
                    "copy": {name: "复制", icon: "copy", callback: function(key, options) {
                        alert("复制");
                    }},
                    "paste": {name: "粘贴", icon: "paste", callback: function(key, options) {
                        alert("粘贴");
                    }},
                    "delete": {name: "删除", icon: "delete", callback: function(key, options) {
                        alert("删除");
                    }},
                    "sep1": "---------",
                    "quit": {name: "退出", icon: "quit", callback: function(key, options) {
                        alert("退出");
                    }}
                }
            });
        });
    </script>
</body>
</html>