<!DOCTYPE html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>jQuery自定义区域的鼠标右键菜单</title>

     <style type="text/css">

         #mask{position: absolute;left: 0;top: 0;z-index: 9000;display: block;}

         #myMenu{position: absolute;display: none;z-index: 9999;background: yellow;border: 1px solid;width: 200px;height: 155px;}

         #textbox{background: orange;width: 380px;border: 2px solid;}

         img{height: 30px;width: 30px;}

         td{font-size: 20px;cursor: pointer;}

         a{text-decoration: none;color: black;}

         a:hover{color: white;background: black;}

     </style>

     <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>

     <script type="text/javascript">

         var windowwidth;

         var windowheight;

         var checkmenu;

         $(window).ready(function() {

             $('#myMenu').hide();

             $('#textbox').on("contextmenu",function(e){

                 windowwidth = $(window).width();

                 windowheight = $(window).height();

                 checkmenu = 1;

                 $('#mask').css({

                     'height': windowheight,

                     'width': windowwidth

                 });

                 $('#myMenu').show(500);

                 $('#myMenu').css({

                     'top':e.pageY+'px',

                     'left':e.pageX+'px'

                 });

                 return false;

             });

             $('#mask').click(function(){

                 $(this).height(0);

                 $(this).width(0);

                 $('#myMenu').hide(500);

                 checkmenu = 0;

                 return false;

             });

             $('#mask').on("contextmenu",function(){

                 $(this).height(0);

                 $(this).width(0);

                 $('#myMenu').hide(500);

                 checkmenu = 0;

                 return false;

             });

             $(window).resize(function(){

                 if(checkmenu == 1) {

                     windowwidth = $(window).width();

                     windowheight = $(window).height();

                     $('#mask').css({

                         'height': windowheight,

                         'width': windowwidth,

                     });

                 }

             });

         });

     </script>

 </head>

 <body>

   <div id="myMenu" >

     <table cellspace="3">

         <tr>

             <td ><img src="data:images/twitter.png" ></td><td><a href="#">tweet me</a></td>

         </tr>

         <tr>

             <td ><img src="data:images/facebook.png" > </td><td><a href="#">facebook share</a></td>

         </tr>

         <tr>

             <td ><img src="data:images/myspace.png" > </td><td><a href="#">myspace share</a></td>

         </tr>

         <tr>

             <td ><img src="data:images/mail.png" > </td><td><a href="#">e-mail this</a></td>

         </tr>

     </table>

   </div>

   <div id="mask"> </div>

    <div id="textbox">

     <p>嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！<p/>

    </div>

 </body>

 </html>

jquery实现右键菜单的更多相关文章

  1. 用jQuery修改右键菜单

    概述 以前在网上找过屏蔽右键菜单的代码,也找过屏蔽F12的代码,今天无意之中看到别人的右键菜单很有意思,我也想来搞一个. 思路 建立一个菜单并且隐藏起来. 用window.oncontextmenu屏 ...

  2. [xPlugins] jQuery Contextmenu右键菜单

    [2012-04-12] Contextmenu 右键菜单 v0.1 版本发布 [功能] 在特定区域弹出右键菜单 [功能] 可以在弹出右键菜单区域内,再屏蔽某个小区域. [功能] 有两种方式添加右键菜 ...

  3. jQuery EasyUI 右键菜单--关闭标签/选项卡

    目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", func ...

  4. jquery 自定义右键菜单

    如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止 ...

  5. 实现JQuery EasyUI右键菜单变灰不可用效果

    使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...

  6. jQuery自定义右键菜单

    首先看下效果,效果在最下面: 代码: body { font-size: 12px; margin: 0px; padding: 0px; } form,div,ul,li { margin: 0px ...

  7. (转)jQuery禁止右键菜单，全选

    本文转载自:http://www.cnblogs.com/lucker/archive/2012/09/21/2696464.html $("body").bind("c ...

  8. Jquery 右键菜单(ContextMenu)插件使用记录

    目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...

  9. jQuery右键菜单contextMenu实例

    URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/superc ...

随机推荐

  1. Solr各个版本重大变化之安装方式【请别违背规律】

    这里主要讲安装方式的变化 4.x~5.x的变化 这是4.x的安装方式,大家都熟知,在我看来未免繁琐了一点. 或许官方也感觉繁琐了,于是5.x有个最大的改变.↓ 现在Solr是一个独立的服务器 什么叫S ...

  2. php中的session过期思考一二

    看了php开发组成员鸟哥的一篇关于php设置session过期(http://www.laruence.com/2012/01/10/2469.html)的文章 他也说了一般人的回答的几个答案, 回答 ...

  3. 浅谈js的数字格式

    除了正常我们常用的十进制(如5,8,12.123等),js还可以直接表示2.8.16进制 1.二进制 二进制是以0b开头 0b10; 2.八进制 八进制是以0开头 010: 3.十六进制 十六进制是以 ...

  4. multidownloadXkcd 多线程抓图

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  5. MySQL开启远程连接的方法

    默认情况下,mysql只允许本地登录,如果要开启远程连接,则需要修改/etc/mysql/my.conf文件. 一.修改/etc/mysql/my.conf找到bind-address = 127.0 ...

  6. 函数和常用模块【day04】：函数的非固定参数（三）

    本节内容 1.概述 2.默认参数 3.参数组 4.总结 一.概述 在上一篇博客中我已经写了,位置参数和关键字参数,下面我们来谈谈默认参数和参数组 二.默认参数 默认参数指的是,我们在传参之前,先给参数 ...

  7. python---定义一个session类(无错）

    import tornado.web #放在内存 redis 文件 数据库 container={} #定义一个session类 class Session: def __init__(self,ha ...

  8. 用jsch.jar实现SFTP上传下载删除【转】【补】

    java类: 需要引用的jar: jsch-0.1.53.jar 关于jsch有篇文章关于目录的问题写得非常好:http://www.zzzyk.com/show/9f02969327434a6c.h ...

  9. Spring面向切面编程AOP(around)实战

    spring aop的环绕通知around功能强大,我们这里就不细说,直接上代码,看着注释就能明白 需要的可以点击下载源码 1.如果使用注解的方式则需要先创建个注解类 package com.mb.a ...

  10. .NET面试题系列（十二）Dictionary原理

    序言 Dictionary Dictionary的开发人员都了解,和List相比,字典添加会慢,但是查找会比较快. Dictionary的本质 --- 两个数组.这是典型的用空间换取时间的做法. 先来 ...