主要用到了oncontextmenu事件,在oncontextmenu事件中使用return false 屏蔽掉原生右键菜单,再使用event获取鼠标的坐标位置,设置自定义菜单的位置。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.1.1.js" charset="utf-8"></script>
    <script src="contextMenu/jquery.ui.position.min.js" type="text/javascript"></script>
    <script src="contextMenu/jquery.contextMenu.js" type="text/javascript"></script>
    <link href="contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button class="context-menu-one">按钮1</button>
    <script type="text/javascript">
      $(function() {
         //初始化菜单
         $.contextMenu({
             selector: '.context-menu-one',
             callback: function(key, options) {
                 console.log("点击了:" + key);
             },
             items: {
                 "edit": {name: "编辑", icon: "edit"},
                 "cut": {name: "剪切", icon: "cut"},
                 "copy": {name: "复制", icon: "copy"},
                 "paste": {name: "粘贴", icon: "paste"},
                 "delete": {name: "删除", icon: "delete"},
                 "sep1": "---------",
                 "quit": {name: "退出", icon: function(){
                     return 'context-menu-icon context-menu-icon-quit';
                 }}
             }
         });
      });
    </script>
  </body>
</html>
icon: "paste" // Class context-menu-icon-paste is used on the menu item.
使用自带的图标需要font文件夹的内容

js jQuery 右键菜单 清屏的更多相关文章

  1. js(jquery)右键菜单插件的实现

    今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能.也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容.这样可以拓展右键的功能.实现过程不多说了,写出来的代码和效果如下: js部分: ...

  2. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  3. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

  4. jQuery右键菜单contextMenu使用实例

    在最近项目中需要频繁的右键菜单操作.我采用了contextMenu这款jQuery插件. 参考网址:http://www.jb51.net/article/58709.htm 官网demo http: ...

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

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

  6. jQuery右键菜单contextMenu实例

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

  7. js禁用右键菜单、选中、复制、剪切、粘贴

    //屏蔽右键菜单 document.oncontextmenu = function (event) { if (window.event) { event = window.event; } try ...

  8. JS屏蔽右键菜单,复制,粘帖xxxxx........

    //屏蔽右键菜单 document.oncontextmenu = function (event) { if (window.event) { event = window.event; } try ...

  9. js 禁用右键菜单、拖拽、选中、复制

    //禁用拖拽 document.ondragstart = function () { return false; }; /** * 禁用右键菜单 */ document.oncontextmenu ...

随机推荐

  1. iphone 4s插件的安装,问题及美化

    此处iphone4s为美版,系统版本为5.0.1 首先添加我自己的weiphone源:http://apt.weiphone.com/u/2903862以及破解资源源:http://cydia.xse ...

  2. 搭建Dubbo+Myeclipse2015+Maven3.3.1的过程遇到问题集锦

    1. 找不到dubbo2.8.4包的问题 在编译Maven工程的过程中,出现如下问题: Description Resource Path Location Type ArtifactDescript ...

  3. WPF 4 Ribbon 开发 之 快捷工具栏(Quick Access Toolbar)

    转自 http://www.cnblogs.com/gnielee/archive/2010/05/10/wpf4-ribbon-quick-access-toolbar.html 在Office 2 ...

  4. nginx加载字体文件的时候报错

    nginx 下加载配置 location ~* \.(eot|ttf|ttc|otf|eot|woff|woff2|svg)$ {                root /web/static_jr ...

  5. Android 版本对于 API

    Android版本 API 代号 官网链接 Android 2.3.3 API 10 Gingerbread 官网 Android 3.0 API 11 Android 3.1 API 12 Andr ...

  6. 星云 Android 开发工具箱

    Toast 工具类: SmartToastUtils.java import android.content.Context; import android.widget.Toast; /** * T ...

  7. C语言发展历程及其保留字(关键字)——附:C语言标准文档

    引言         抽时间对C语言发展历程和C语言的标准库文件及其保留字/关键字做了个梳理,后面附C语言各版本国际标准. C语言发展历程及其标准库 C语言关键字/保留字 C语言国际标准       ...

  8. Sql Server 2008 清除日志

    --在SQL2008中清除日志就必须在简单模式下进行,等清除动作完毕再调回到完全模式. USE [master] GO ALTER DATABASE SSCDZ SET RECOVERY SIMPLE ...

  9. 在 Yosemite 装 Jave 的方法. ( 适用于 OS X 10.10 )

    因为并非所有用户都用得着 Java ,所以在默认状态下 OS X 不预装 Java , 如果你需要的话可以手动安装. 1. http://support.apple.com/kb/DL1572到苹果官 ...

  10. DIOCP开源项目-DIOCP3 大文件的传输DEMO<断点续传>

    首先该DEMO在StreamCoder上面做的改动,期间导致StreamCoderDEMO经常出现问题,导致大家运行的时候,频频出现问题,表示道歉. 以下是测试的结果,从服务器下载传输了一个3G左右的 ...