自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--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
