一、实现原理
HTML DOM事件中,oncontextmenu是鼠标的右键单击事件。默认情况下,此事件会使浏览器弹出一个窗口,窗口中的内容为浏览器的自定义功能。基于此事件,我们就可以实现自定义的右键菜单。实现思路:首先在oncontextmenu事件中,禁用浏览器的默认功能,同时弹出一个自定义区域(可以是div也可以是ul等等),其次实现自定义弹出区域的关闭功能;
二、实现代码
1.核心代码:
1 document.oncontextmenu= function(event){ 2 $(selector).show(); 3 return false; 4 } 5 $(document).click(function(){ 6 $(selector).hide(); 7 });
以上代码中return false是关键,return false语句阻止了浏览器的默认弹出窗口;$(selector)为自定义弹出区域;$(document).click()事件关闭自定义弹出区域;
2.插件核心结构
1 ; (function ($, window, document, undefined) { 2 var defaults = { 3 contextMenuItems: [ 4 { type: "menuitem", id: "btn1", value: "功能一", class: "c1" }, 5 { type: "menuitem", id: "btn2", value: "功能二", class: "c2" }, 6 { type: "separator" }, 7 { type: "menuitem", id: "btn3", value: "功能三", class: "c3" }, 8 { type: "menuitem", id: "btn4", value: "功能四", class: "c4" } 9 ] 10 }; 11 12 //右键菜单对象 13 var ContextMenu = function (element, options) { 14 this.$elements = element; 15 this.settings = $.extend({}, defaults, options); 16 this.x = 0; 17 this.y = 0; 18 }; 19 20 ContextMenu.prototype = { 21 //创建右键菜单 22 createContextMenu: function () { 23 //防止多次插入 24 if ($(".contextmenu").length > 0) $(".contextmenu").remove(); 25 var ul = '<ul class="contextmenu">'; 26 var items = this.settings.contextMenuItems; 27 $.each(items, function (index, element) { 28 var li = ''; 29 var type = element.type; 30 if (type == "menuitem") { 31 var className = (element.class) ? 'class="' + element.class + '"' : ''; 32 li = '<li class="menuitem"><a ' + className + ' id="' + element.id + '">' + element.value + '</a></li>'; 33 } else { 34 li = '<li class="separator"></li>'; 35 } 36 ul += li; 37 }); 38 $("body").append(ul); 39 }, 40 //初始化右键菜单 41 initContextMenu: function (element) { 42 if (element.nodeType != 9) return; 43 var $this = this; 44 element.oncontextmenu = function (event) { 45 //获取x,y偏移量,从而可以精确定位右键菜单的显示位置 46 $this.x = event.pageX; 47 $this.y = event.pageY; 48 $(".contextmenu").css({ 49 "left": event.pageX + "px", 50 "top": event.pageY + "px" 51 }).show(); 52 return false; 53 }; 54 $(document).click(function () { 55 $(".contextmenu").hide(); 56 }); 57 } 58 }; 59 60 //右键菜单功能 61 ContextMenu.prototype.contextMenu = function () { 62 var $this = this; 63 $this.createContextMenu(); 64 return $this.$elements.each(function (index, element) { 65 $this.initContextMenu(element); 66 }); 67 }; 68 69 $.fn.extend({ 70 contextMenu: function (options) { 71 return new ContextMenu(this, options).contextMenu(); 72 } 73 }); 74 75 })(jQuery, window, document);
以上代码包含ContextMenu对象、ContextMenu构造函数、defaults默认数据、ContextMenu原型方法、jQuery插件扩展方法$.fn.extend(),$.fn.extend()方法为此插件向外提供了一个接口,从而外部作用域可以通过此接口调用ContextMenu的内部属性、方法等;
3.插件css样式
1 /*右键菜单样式*/ 2 .contextmenu { 3 position: absolute; 4 z-index: 10001; 5 display: none; 6 padding: 3px 0; 7 background-color: white; 8 border: 1px solid rgb(186,186,186); 9 -moz-box-shadow: 2px 2px 2px rgb(142,142,142); 10 -webkit-box-shadow: 2px 2px 2px rgb(142,142,142); 11 box-shadow: 2px 2px 2px rgb(142,142,142); 12 list-style: none; 13 } 14 15 .contextmenu .menuitem a { 16 display: block; 17 padding: 3px 50px 3px 40px; 18 text-decoration: none; 19 } 20 21 .contextmenu .menuitem a:hover { 22 color: white; 23 background-color: rgb(66,129,244); 24 cursor: pointer; 25 } 26 27 .contextmenu .menuitem .disabled { 28 color: #777; 29 } 30 31 .contextmenu .menuitem .disabled:hover { 32 cursor: auto; 33 } 34 35 .contextmenu .separator { 36 margin: 3px 0; 37 border-top: 1px solid #d9d9d9; 38 }
以上css样式代码是仿照浏览器默认打开的右键菜单的样式制作的,个人觉得效果还不错,右键菜单的功能代码写于ContextMenu的原型方法中即可,这样一个基本的右键菜单插件就完成啦;