jQuery插件开发之右键菜单ContextMenu

一、实现原理

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 });

View Code

 

以上代码中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);

View Code

以上代码包含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     }

View Code

以上css样式代码是仿照浏览器默认打开的右键菜单的样式制作的，个人觉得效果还不错，右键菜单的功能代码写于ContextMenu的原型方法中即可，这样一个基本的右键菜单插件就完成啦；