主要用到了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. python yield的解释

    链接地址: http://pyzh.readthedocs.io/en/latest/the-python-yield-keyword-explained.html https://www.jians ...

  2. idea搭建javaweb项目 Artifacts生成

    菜单:File - > Project Structure 图1 图2:静态资源文件 图3:java文件编译到WEB-INF/classes 图4:Inherit project compile ...

  3. Android 设备管理API概览（Device Administration API）

    原文:http://android.eoe.cn/topic/android_sdk Android 2.2通过提供Android设备管理API的支持来引入企业应用支持.在系统级的设备管理API提供了 ...

  4. 译: 3. Axis2快速入门指南

    本指南的目的是让您尽快使用Axis2开始创建服务和客户端.我们将采用一个简单的StockQuote服务,向您展示可以创建和部署它的一些不同方式,以及快速查看Axis2附带的一个或两个实用程序.然后,我 ...

  5. 【Unity】10.1 类人动画的导入和设置

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.制作或购买类人模型 为了充分使用 Mecanim 类人动画系统和类人动画的动画重定位功能,需要先使用其他3D建模软件(例如3d ...

  6. 10个Python面试常问的问题

    概述 Python是个非常受欢迎的编程语言,随着近些年机器学习.云计算等技术的发展,Python的职位需求越来越高.下面我收集了10个Python面试官经常问的问题,供大家参考学习. 类继承 有如下的 ...

  7. centos 7 忘记密码

    修改rd.lvm.lv=cl/swap(我的是虚似机如果是实体机的话应该是ro_rd.lvm.lv=centos/swap)改成 rw init=/sysroot/bin/sh 注意上图rw init ...

  8. JVM源码分析之安全点safepoint

    https://blog.csdn.net/iter_zc/article/details/41892567 https://www.jianshu.com/p/c79c5e02ebe6

  9. C++11 STL算法简介

    STL(Standard Template Library),即标准模板库,是一个具有工业强度的,高效的C++程序库.它被容纳于C++标准程序库(C++ Standard Library)中,是ANS ...

  10. http.ResponseWriter的Flush

    func handle(res http.ResponseWriter, req *http.Request) { fmt.Fprintf(res, "sending first line ...