自定义右键菜单,禁用浏览器自带的右键菜单[右键菜单实现--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 = $(‘<li><a tabindex="-1" href="‘ + data[i].href + ‘"‘+linkTarget+‘>‘ + data[i].text + ‘</a></li>‘);
 64                 }
 65                 if (typeof data[i].action !== ‘undefined‘){
 66                     var actiond = new Date(),
 67                         actionID = ‘event-‘ + actiond.getTime() * Math.floor(Math.random()*100000),
 68                         eventAction = data[i].action;
 69                     $sub.find(‘a‘).attr(‘id‘, actionID);
 70                     $(‘#‘ + actionID).addClass(‘context-event‘);
 71                     $(document).on(‘click‘, ‘#‘ + actionID, eventAction);
 72                 }
 73                 $menu.append($sub);
 74                 if (typeof data[i].subMenu != ‘undefined‘){
 75                     var subMenuData = buildMenu(data[i].subMenu, id, true);
 76                     $menu.find(‘li:last‘).append(subMenuData);
 77                 }
 78             }
 79             if (typeof options.filter == ‘function‘) {
 80                 options.filter($menu.find(‘li:last‘));
 81             }
 82         }
 83         return $menu;
 84     }
 85     function addContext(selector, data){
 86         var d = new Date(),
 87             id = d.getTime(),
 88             $menu = buildMenu(data, id);
 89         $(‘body‘).append($menu);
 90         $(document).on(‘contextmenu‘, selector, function (e){
 91             e.preventDefault();
 92             e.stopPropagation();
 93             $(‘.dropdown-context:not(.dropdown-context-sub)‘).hide();
 94             $dd = $(‘#dropdown-‘ + id);
 95             if (typeof options.above == ‘boolean‘ && options.above) {
 96                 $dd.addClass(‘dropdown-context-up‘).css({
 97                     top: e.pageY - 20 - $(‘#dropdown-‘ + id).height(),
 98                     left: e.pageX - 13
 99                 }).fadeIn(options.fadeSpeed);
100             } else if (typeof options.above == ‘string‘ && options.above == ‘auto‘){
101                 $dd.removeClass(‘dropdown-context-up‘);
102                 var autoH = $dd.height() + 12;
103                 if ((e.pageY + autoH) > $(‘html‘).height()){
104                     $dd.addClass(‘dropdown-context-up‘).css({
105                         top: e.pageY - 20 - autoH,
106                         left: e.pageX - 13
107                     }).fadeIn(options.fadeSpeed);
108                 } else {
109                     $dd.css({
110                         top: e.pageY + 10,
111                         left: e.pageX - 13
112                     }).fadeIn(options.fadeSpeed);
113                 }
114             }
115         });
116     }
117     function destroyContext(selector) {
118         $(document).off(‘contextmenu‘, selector).off(‘click‘, ‘.context-event‘);
119     }
120     return {
121         init: initialize,
122         settings: updateOptions,
123         attach: addContext,
124         destroy: destroyContext
125     };
126 })();

context.js主要来编写自定义右键菜单对应的功能连接
下面的demo.js则是菜单的编辑与显示的样式

 1 /**
 2  * @trimmer Visec·Dana
 3  * @time 2014-7-23
 4  */
 5 $(document).ready(function(){
 6     /**
 7      * 右键菜单信息
 8      * text 文本内容
 9      * href 链接地址?
10      */
11     context.settings({compress: true});   //字体属性大小
12     context.attach(‘html‘,[
13         {header: ‘菜单栏‘},
14         {divider: true},      //控制实线
15         {text: ‘后退‘, href: ‘#‘},
16         {text: ‘前进‘, href: ‘#‘},
17         {divider: true},
18         {text: ‘菜单信息1‘, href: ‘#‘},
19         {text: ‘菜单信息1‘, href: ‘#‘},
20         {text: ‘菜单信息1‘, href: ‘#‘},
21         {text: ‘菜单信息1‘, href: ‘#‘},
22         {divider: true},
23         {text: ‘菜单信息1‘, href: ‘#‘},
24         {divider: true},
25         {text: ‘禁用自定义菜单‘, action: function(e){
26             e.preventDefault();
27             context.destroy(‘html‘);
28             alert(‘确定要禁用吗?‘);
29         }},
30     ]);
31     context.init({preventDoubleContext: false});  //单击左键关闭右键菜单
32 });

这里是我编写的一个Demo的文件结构图,还有一些CSS文件信息代码,我就不贴了,文件已共享!

Demo下载:http://yunpan.cn/Q7BVXNGXdSvYB  访问密码 04d9

时间: 2024-10-15 08:45:53

自定义右键菜单,禁用浏览器自带的右键菜单[右键菜单实现--Demo]的相关文章

如何禁用浏览器自带的表单验证

novalidate <form action="/" novalidate> ... </form>

Android自定义ViewGroup(一)——带箭头的圆角矩形菜单

今天要做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽度.箭头

带说名文字的菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

火狐浏览器打开带flash的页面浏览器假死,崩溃

火狐浏览器打开带flash的页面浏览器假死,崩溃 今天打开页面时运行了flash插件,然后发现整个浏览器没有反应,浏览器未出现无响应提示,并且电脑内存,CPU都处于正常范围,在网上看了半天,大致原因是因为flash的安全沙箱技术,导致浏览器崩溃 解决方案 1.点击 菜单 中的 附加组件. 然后左侧选择 插件 . 然后在右侧 找到 Shockwave Flash.点击选项. 取消勾选 拦截骚扰与危险性的flash内容. 重启火狐即可. 2,手动更改,百度上的教程都是这种方法,效果与上面的方法一样,

Jquery 禁用浏览器的 后退和前进按钮

使用js,Jquery 禁用浏览器的back 和 next 按钮: 有时为了防治用户乱了访问顺序,不得不禁掉浏览器的前进后退按钮. jQuery(document).ready(function () { if (window.history && window.history.pushState) { $(window).on('popstate', function () { /// 当点击浏览器的 后退和前进按钮 时才会被触发, window.history.pushState('f

Eclipse右键增加在浏览器打开

https://github.com/samsonw/OpenExplorer/downloads放在  \eclipse\plugins 下,右键项目就多一个 以后打开项目文件夹就方便了. Eclipse右键增加在浏览器打开,布布扣,bubuko.com

[转] 利用js实现 禁用浏览器后退

[From] http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.所以在有些页面上,适当的禁用浏览器的后退,是可以提高很大的用户体验.在网上查,可以查到很多js禁用后退的材料. 用的多的方法如下: 1.回退后,产生一个前进事件. 这种方式,不算是一个满意的解决方式.因为用户能体验到,界面的后退

自定义类StyleSheet跨浏览器操作样式表中的规则

这是群里网友地瓜提供的一个类,不熟悉样式的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross

禁用浏览器器返回按钮

场景:今天在项目中遇到一种场景,需要禁用浏览器返回按钮,防止用户误操作.考虑试用一下history的新伙伴,history.pushState(),popstate事件 尝试:在各大网友的谋略中,用的最多的版本 history.pushState(null, null, document.URL);$(window).on('popstate', function() { history.pushState(null, null, document.URL);}); 果然不错,chrome和Fi