网页右键插件

在网页中有时间需要添加比较复杂的菜单操作，在Windows中可以使用右键菜单，但在网页中右键事件默认是被浏览器处理了，那么可不可以自定义控件的右键点击事件呢？答案当然是可以的。

还是上代码：

  1 /****************右键菜单******************/
  2 ; (function ($, window, document, undefined) {
  3     $.fn.rightClick = function (onClick) {
  4         var $this = $(this);
  5 
  6         if (!$$.isFunction(onClick)) {
  7             return;
  8         }
  9 
 10         $this.bind("contextmenu", function () {
 11             return false;
 12         });
 13 
 14         $this.on("mousedown", function (e) {
 15             if (e.which == 3) {
 16                 onClick(e);
 17                 return false;
 18             }
 19         });
 20     }
 21     
 22     var menu = function (ele, opt) {
 23         var $this = this;
 24 
 25         $this.$element = $(ele);
 26         $this._default = {
 27             position: {
 28                 x: 0,
 29                 y: 0
 30             },
 31             menuList: [],
 32             hideAfterMenuClick: true
 33         };
 34         $this.option = $.extend(true, {}, $this._default, opt);
 35         $this.controlId = $$.generateId();
 36         $this.removeTimeOut = [];
 37     }
 38 
 39     menu.prototype = {
 40         initCss: function () {
 41             var $this = this;
 42 
 43             var $cssContainer = $(document).find("head");
 44             if ($cssContainer.length == 0) {
 45                 $cssContainer = $(document).find("body");
 46             }
 47 
 48             if ($cssContainer.length == 0) {
 49                 return;
 50             }
 51 
 52             if ($cssContainer.find("#bsmenucss").length > 0) {
 53                 return;
 54             }
 55 
 56             $cssContainer.append("\
 57 <style id='bsmenucss'>\
 58     .md-container { position: fixed; display: inline-block; min-width:100px; box-shadow: 0 0 3px 3px #888; padding: 5px; background-color: #FFF; border-radius: 2px; }\
 59     .md-container .close { display: inline-block; position: absolute; top: 4px; right: 4px; border: 1px solid #000; color: #000; width: 20px; height: 20px; border-radius: 10px; font-size: 16px; text-align: center; line-height: 20px; }\
 60     .md-container ul { display: inline-block; list-style: none; padding: 0; margin: 0; }\
 61     .md-container ul li { display: inline-block; list-style: none; cursor: pointer; width: 100%; border: 1px solid #FFF; border-radius: 2px; padding: 2px 4px; text-shadow: 2px 2px 4px #888; }\
 62     .md-container ul li:hover { border: 1px solid #DDD; background-color: #DDD; }\
 63 </style>");
 64         },
 65         show: function () {
 66             var $this = this;
 67 
 68             $this.initCss();
 69 
 70             if (!$$.isEnumerable($this.option.menuList)) {
 71                 return;
 72             }
 73 
 74             $this.menuContainer = $(document).find("body");
 75 
 76             $this.menuContainer.find(".md-container").remove();
 77 
 78             var menuHtml = $$.format("\
 79 <div id='md{0}' class='md-container' style='top:{1}px;left:{2}px;'>\
 80     <span class='close'>×</span>\
 81     <ul>", $this.controlId, $this.option.position.y, $this.option.position.x);
 82 
 83             for (var i = 0; i < $this.option.menuList.length; i++) {
 84                 var menuItem = $this.option.menuList[i];
 85 
 86                 menuHtml += $$.format("<li data-index='{0}' title='{1}'>{2}</li>", i, menuItem.title, menuItem.name);
 87             }
 88 
 89             menuHtml += "\
 90     </ul>\
 91 </div>";
 92             setTimeout(function () {
 93                 $this.menuContainer.append(menuHtml);
 94 
 95                 $this.delayRemove(500);
 96 
 97                 $this.menuDialog = $this.menuContainer.find("#md" + $this.controlId);
 98                 $this.menuDialog.on("mouseover", function () {
 99                     if (!$$.isEnumerable($this.removeTimeOut)) {
100                         return;
101                     }
102 
103                     $this.status = "normal";
104 
105                     for (var i = 0; i < $this.removeTimeOut.length; i++) {
106                         clearTimeout($this.removeTimeOut[i]);
107                     }
108 
109                     $this.removeTimeOut = [];
110                 });
111                 $this.menuDialog.on("mouseleave", function () {
112                     $this.delayRemove(400);
113                 });
114                 $this.menuDialog.on("click", ".close", function () {
115                     setTimeout(function () { $this.remove(); }, 100);
116                     return false;
117                 });
118                 $this.menuDialog.on("click", "li", function () {
119                     var $li = $(this);
120 
121                     var $index = $$.soe($li.attr("data-index")).toInt(-1);
122                     if ($index < 0 || $index >= $this.option.menuList.length) {
123                         return;
124                     }
125 
126                     var menuItem = $this.option.menuList[$index];
127                     if ($$.isFunction(menuItem.onClick)) {
128                         menuItem.onClick();
129                         if ($this.option.hideAfterMenuClick) {
130                             setTimeout(function () { $this.remove(); }, 100);
131                         }
132                     }
133                 });
134             }, 300);
135         },
136         delayRemove: function (interval) {
137             var $this = this;
138 
139             interval = $$.soe(interval).toInt(400);
140 
141             $this.status = "removing";
142             $this.removeTimeOut.push(setTimeout(function () {
143                 if ($this.status != "removing") {
144                     return;
145                 }
146 
147                 $this.remove();
148             }, interval));
149         },
150         remove: function () {
151             this.menuDialog.remove();
152         }
153     }
154 
155     $.fn.bsMenu = function (option) {
156         var result = new menu(this, option);
157         result.show();
158         return result;
159     }
160 })(jQuery, window, document);
161 /*****************************************/

View Code

使用：

 1 使用：
 2 <script>
 3     $(function () {
 4         $(".right-click-test").rightClick(function (e) {
 5             var position = {};
 6             position.x = e.pageX;
 7             position.y = e.pageY;
 8 
 9             $(this).bsMenu({
10                 position: position,
11                 menuList: [
12                     {
13                         name: "12345",
14                         title: "12345",
15                         onClick: function () {
16                             console.log("12345")
17                         }
18                     },
19                     {
20                         name: "abcdefghi",
21                         title: "abcdefghi",
22                         onClick: function () {
23                             console.log("abcdefghi")
24                         }
25                     }
26                 ]
27             });
28         });
29     });
30 </script>
31 
32 <span class="right-click-test">右键点击事件</span>

插件引用了bootstrap的样式，以及前面随笔的JS扩展。

效果如下图：

转载于:https://www.cnblogs.com/zcr-yu/p/8822083.html