jquery 右键菜单实现

最新推荐文章于 2024-07-03 02:58:04 发布
最新推荐文章于 2024-07-03 02:58:04 发布
阅读量2.2k 收藏
点赞数
分类专栏： js 文章标签： 右键菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songqiang2011/article/details/86520724
版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/contextMenu.css" />
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="js/jquery.contextMenu.min.js"></script>
        <style>
            body {
                background: #000;
            }
            
            .container {
                width: 1000px;
                height: 720px;
                position: absolute;
                left: 50%;
                margin: 100px 0 0 -500px;
            }
            
            .container .box {
                width: 46%;
                height: 100%;
                background: #eee;
            }
            
            #box1 {
                float: left;
            }
            
            #box2 {
                float: right;
            }
            
            .title {
                height: 50px;
                line-height: 50px;
                font-size: 24px;
                text-align: center;
            }
            
            pre {
                font-size: 12px;
                font-family: "微软雅黑";
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div id="box1" class="box">
                <div class="title">右键点我！</div>
                <pre>
                $("#box1").contextMenu({
                    menu: [{
                            text: "新增",
                            callback: function() {
                                alert("新增");
                            }
                        },
                        {
                            text: "复制",
                            callback: function() {
                                alert("复制");
                            }
                        },
                        {
                            text: "粘贴",
                            callback: function() {
                                alert("粘贴");
                            }
                        },
                        {
                            text: "删除",
                            callback: function() {
                                alert("删除");
                            }
                        }
                    ]
                });    
                </pre>
            </div>
            <div id="box2" class="box">
                <div class="title">右键点我！</div>
                <pre>
            $("#box2").contextMenu({
                width: 110,// width
                itemHeight: 30,// 菜单项height
                bgColor: "#333",// 背景颜色
                color: "#fff",// 字体颜色
                fontSize: 12,// 字体大小
                hoverBgColor: "#99CC66",// hover背景颜色
                target: function(ele) {// 当前元素
                    console.log(ele);
                },
                menu: [{// 菜单项
                        text: "新增",
                        icon: "img/add.png",
                        callback: function() {
                            alert("新增");
                        }
                    },
                    {
                        text: "复制",
                        icon: "img/copy.png",
                        callback: function() {
                            alert("复制");
                        }
                    },
                    {
                        text: "粘贴",
                        icon: "img/paste.png",
                        callback: function() {
                            alert("粘贴");
                        }
                    },
                    {
                        text: "删除",
                        icon: "img/del.png",
                        callback: function() {
                            alert("删除");
                        }
                    }
                ]
            
            });
                    </pre>
            </div>
        </div>
        <script>
            $("#box1").contextMenu({
                menu: [{
                        text: "新增",
                        callback: function() {
                            alert("新增");
                        }
                    },
                    {
                        text: "复制",
                        callback: function() {
                            alert("复制");
                        }
                    },
                    {
                        text: "粘贴",
                        callback: function() {
                            alert("粘贴");
                        }
                    },
                    {
                        text: "删除",
                        callback: function() {
                            alert("删除");
                        }
                    }
                ]
            });

            $("#box2").contextMenu({
                width: 110, // width
                itemHeight: 30, // 菜单项height
                bgColor: "#333", // 背景颜色
                color: "#fff", // 字体颜色
                fontSize: 12, // 字体大小
                hoverBgColor: "#99CC66", // hover背景颜色
                target: function(ele) { // 当前元素
                    console.log(ele);
                },
                menu: [{ // 菜单项
                        text: "新增",
                        icon: "img/add.png",
                        callback: function() {
                            alert("新增");
                        }
                    },
                    {
                        text: "复制",
                        icon: "img/copy.png",
                        callback: function() {
                            alert("复制");
                        }
                    },
                    {
                        text: "粘贴",
                        icon: "img/paste.png",
                        callback: function() {
                            alert("粘贴");
                        }
                    },
                    {
                        text: "删除",
                        icon: "img/del.png",
                        callback: function() {
                            alert("删除");
                        }
                    }
                ]

            });
        </script>
    </body>

</html>

像忘了谁sq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现右键菜单操作
qq_45020437的博客
05-29 853
js实现右键菜单操作 <!--右键菜单的实现（包括细节）--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ...
JS实现页面右键菜单
Sun_blog
05-17 3692
JS实现页面右键菜单
jquery右键菜单实现
08-07
jquery右键菜单实现
JQuery之ContextMenu(右键菜单)
weixin_33806300的博客
11-18 153
插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.jsJquery主页:   http://jquery.com...
jquery 右键菜单 插件
最新发布
weixin_36444881的博客
07-03 36
jQuery右键菜单插件简介 在Web开发中，右键菜单是一个常见的交互方式，可以为用户提供更多的操作选项。而利用jQuery插件可以方便地实现这一功能。今天我们来介绍一个简单易用的jQuery右键菜单插件，让你的网页交互更加丰富。 插件介绍 这个插件名为contextMenu，是一个轻量级的右键菜单插件，可以通过简单的设置...
jquery右键菜单
xiaozhen0610的博客
07-09 381
点击这里体验效果如果要屏蔽页面原来的右键菜单，请设置disable_native_context_menu:true以下是源代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jQuery右键菜单，上下文菜单-柯乐义</title> 5 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jq
Jquery 右键菜单
Chatopera
09-09 2346
介绍：这里所指的右键菜单实际上应该称为上下文菜单，jQuery右键菜单是一个jQuery插件，要求1.3版本以上的jQuery，可以在各种浏览器中使用 下载源码 From:http://www.okbase.net/doc/details/11
基于jQuery的鼠标右键菜单
从零出发
05-27 7321
对于自制的鼠标右键功能，我们应该考虑哪些因素呢？一、涉及因素1、阻止默认鼠标右键事件。3、右键事件，使菜单出现。2、考虑右键菜单出现的位置，是否超出窗口。4、点击窗口任意位置，菜单消失。二、具体代码及分析如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt...
jQuery右键美化菜单特效.zip
11-24
在这个“jQuery右键美化菜单特效.zip”压缩包中，包含了一个使用jQuery实现的右键菜单美化功能。这个功能对于提升用户体验，尤其是为鼠标右键点击事件提供定制化、美观的反馈，具有重要意义。 首先，我们要了解...
jquery实现右键菜单插件
10-24
本文将介绍如何使用jQuery，一个广泛使用的JavaScript库，来实现模拟右键菜单的插件。 ###知识点概述 ####jQuery基础 jQuery是一个快速、简洁的JavaScript库，通过封装对HTML文档的操作和事件处理，简化了AJAX...
jQuery实现右键菜单源码
10-20
jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单 jQuery实现右键菜单
Javascript 右键菜单 JQuery 实现
07-31
Javascript右键菜单，JQuery 实现 本人网络收集 提供自己使用和研究 /**得到一个对象的所有属性 var attrs="t:"; for(var attr in t) { attrs+=attr; attrs+="|"; alert("inst的"+attr+"属性:"+t[attr]); } alert(attrs); **/ iframe.contentWindow.document.getElementById
jQuery右键菜单contextMenu使用实例
12-03
《jQuery右键菜单contextMenu使用实例详解》 在网页交互设计中，右键菜单是一种常见的功能，用于提供快捷的操作选项。jQuery的contextMenu插件为我们提供了实现这一功能的强大工具。本文将详细介绍如何利用jQuery和...
【jQuery】简单的右键菜单
冰冷的希望的博客
06-17 1627
1.说明 在浏览器点击右键会弹出一个浏览器自带的默认菜单，不过有些场景我们需要一个自定义的菜单，这时候我们要阻止默认菜单并显示我们自己做好的菜单 2.代码 我们简单使用ul和li创建一个菜单 HTML代码 <ul class="contextmenu"> <li> <span>详情</span> </li> <li> <span>功能1</span>
使用jQuery实现右键菜单
weixin_44521686的博客
08-11 488
var arr = ["新建", "复制", "剪切", "粘贴", "删除"]; var cloneDiv,selectDiv; var ul=$("<ul></ul>").appendTo("body").css({ listStyle: "none", margin: 0, padding: 0, position: "absolute", display: "none", zIndex: 999, }).mouseleave
JQuery---右键菜单版本一
xxb2008的专栏
05-08 1613
今天，有点积级写了个JQuery右键菜单，版本一，以后有需要再优化出版本二，哈！，记录一下 jquery.rightMenu.js ; /*   * feifei--rightMenu.1.0   *  which : right,   //right middle left  menus:[      {          name:"name",  //菜单名          cli
jQuery实现右键菜单与遮罩效果
"jQuery 实现右键菜单、遮罩及弹出层效果的代码示例" 在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画制作以及Ajax交互等多个方面的工作。在这个示例中，我们将探讨如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值