自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]

许多从事Web开发的会发现有些事，我们需要禁用浏览器本事自带的右键菜单，而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单

首先来创建JSP页面

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  2 <html>  3 <head>  4 <title>右键菜单</title>  5 <script src="js/jquery.min.js"></script>  6 </head>  7 <link rel="stylesheet" type="text/css" href="css/demo.css">  8 <link rel="stylesheet" type="text/css" href="css/context.standalone.css">  9 <script src="js/context.js"></script> 10 <script src="js/demo.js"></script> 11 <body> 12 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div> 13 </body> 14 </html>

这里来控制一个文本区域内浏览器自带的右键菜单禁用，使用自定义菜单

  1 /**
  2  *@ trimmer Visec·Dana
 3  *@ time 2014-7-23  4  **/  5 var context = context || (function () {  6 var options = {  7 fadeSpeed: 100,  8  filter: function ($obj) {  9  },  10 above: 'auto',  11 preventDoubleContext: true,  12 compress: false  13  };  14  15  function initialize(opts){  16 options = $.extend({}, options, opts);  17 $(document).on('click', 'html', function () {  18 $('.dropdown-context').fadeOut(options.fadeSpeed, function(){  19 $('.dropdown-context').css({display:''}).find('.drop-left').removeClass('drop-left');  20  });  21  });  22 if(options.preventDoubleContext){  23 $(document).on('contextmenu', '.dropdown-context', function (e) {  24  e.preventDefault();  25  });  26  }  27 $(document).on('mouseenter', '.dropdown-submenu', function(){  28 var $sub = $(this).find('.dropdown-context-sub:first'),  29 subWidth = $sub.width(),  30 subLeft = $sub.offset().left,  31 collision = (subWidth+subLeft) > window.innerWidth;  32 if(collision){  33 $sub.addClass('drop-left');  34  }  35  });  36  37  }  38  39  function updateOptions(opts){  40 options = $.extend({}, options, opts);  41  }  42  43  function buildMenu(data, id, subMenu){  44 var subClass = (subMenu) ? ' dropdown-context-sub' : '',  45 compressed = options.compress ? ' compressed-context' : '',  46 $menu = $('<ul class="dropdown-menu dropdown-context' + subClass + compressed+'" id="dropdown-' + id + '"></ul>');  47 var i = 0, linkTarget = '';  48 for(i; i<data.length; i++){  49 if (typeof data[i].divider !== 'undefined'){  50 $menu.append('<li class="divider"></li>');  51 } else if (typeof data[i].header !== 'undefined'){  52 $menu.append('<li class="nav-header">' + data[i].header + '</li>');  53 } else {  54 if (typeof data[i].href == 'undefined'){  55 data[i].href = '#';  56  }  57 if (typeof data[i].target !== 'undefined'){  58 linkTarget = ' target="'+data[i].target+'"';  59  }  60 if (typeof data[i].subMenu !== 'undefined'){  61 $sub = ('<li class="dropdown-submenu"><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>');  62 }else{  63 $sub = $('

转载于:https://www.cnblogs.com/jameslif/p/4119296.html

自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]相关推荐

浏览器自带开发工具你知道多少？
常规找到开发工具快捷方式: "F12"(Windows) "Cmd"⌘ +"Option" +"I"(Mac) 右键 ...
浏览器自带的禁用端口
浏览器自带了一些禁用端口,使用了的话会禁止访问. Google Chrome浏览器与Edge浏览器会报 "ERR_UNSAFE_PORT" Firefox浏览器会报: " ...
Android自定义文件路径箭头,Android自定义ViewGroup实现带箭头的圆角矩形菜单
本文和大家一起做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这 ...
html模板（base标签，meta标签，禁用浏览器缓存）+JSP自定义标签荔枝
[1]html模板 <html> <head><base href="http://loc ...
php微信浏览器自带后退功能禁用,jquery如何实现禁用浏览器后退
jquery实现禁用浏览器后退的方法:首先打开相应的js文件:然后通过"jQuery(document).ready(function () {...}"方法禁用浏览器的back和 ...
tomcat开机自启动--》自动打开浏览器，打开系统首页--》浏览器默认全屏，禁用浏览器缩放、手势、左右滑动
1.tomcat开机自启动 (1)加入系统启动项或系统计划任务 (2)建系统服务,设置服务为开机自启动 (windows) 命令行进入tomcat bin 文件夹 service.bat inst ...
VBS操作IE ---（【当不使用IE时】可以使用Chrome插件，自定义JS插件操作浏览器）
目录 ■前言 ■举个简单VBS操作IE的例子 --- ■如何让IE打开是IE,而不是Edge ■其他更多VBS相关・更多操作一览・按键 shift ctrl alt ・打开图片,以幻灯片形式显示 ...
一招解决windows电脑禁用笔记本自带键盘问题
背景这段时间,笔记本上总会出现卡顿,鼠标跳跃,桌面闪烁的问题,坚持用了一周之后,情况变的严重了,打开我的电脑,可以弹出很多个窗口出来,导致系统卡死,偶尔能用,我就根据自己对电脑的了解尝试了做下修复 ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...

自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]

自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]相关推荐

最新文章

热门文章