Jquery实现右键菜单
HTML代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JQuery右键菜单</title> 6 <script src="jquery-3.3.1.js"></script> 7 <script src="jquery.contextmenu.js"></script> 8 </head> 9 <body> 10 <div id="demo" style="color:green;"> 右键点此 </div> 11 <!--右键菜单的源--> 12 <ul> 13 <li id="open1"> 打开1</li> 14 <li id="open2"> 打开2</li> 15 <li id="open3"> 打开3</li> 16 <li id="open4"> 打开4</li> 17 </ul> 18 </div> 19 </body>
jquery.contextMenu.js代码：
1 /* 2 * ContextMenu - jQuery plugin for right-click context menus 3 * 4 * Author: Chris Domigan 5 * Contributors: Dan G. Switzer, II 6 * Parts of this plugin are inspired by Joern Zaefferer's Tooltip plugin 7 * 8 * Dual licensed under the MIT and GPL licenses: 9 * http://www.opensource.org/licenses/mit-license.php 10 * http://www.gnu.org/licenses/gpl.html 11 * 12 * Version: r2 13 * Date: 16 July 2007 14 * 15 * 16 */ 17 18 (function($) { 19 20 var menu, shadow, trigger, content, hash, currentTarget; 21 var defaults = { 22 menuStyle: { 23 listStyle: 'none', 24 padding: '1px', 25 margin: '0px', 26 backgroundColor: '#fff', 27 border: '1px solid #999', 28 width: '100px' 29 }, 30 itemStyle: { 31 margin: '0px', 32 color: '#000', 33 display: 'block', 34 cursor: 'default', 35 padding: '3px', 36 border: '1px solid #fff', 37 backgroundColor: 'transparent' 38 }, 39 itemHoverStyle: { 40 border: '1px solid #0a246a', 41 backgroundColor: '#b6bdd2' 42 }, 43 eventPosX: 'pageX', 44 eventPosY: 'pageY', 45 shadow : true, 46 onContextMenu: null, 47 onShowMenu: null 48 }; 49 50 $.fn.contextMenu = function(id, options) { 51 if (!menu) { // Create singleton menu 52 menu = $('<div id="jqContextMenu"></div>') 53 .hide() 54 .css({position:'absolute', zIndex:'500'}) 55 .appendTo('body') 56 .bind('click', function(e) { 57 e.stopPropagation(); 58 }); 59 } 60 if (!shadow) { 61 shadow = $('<div></div>') 62 .css({backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499}) 63 .appendTo('body') 64 .hide(); 65 } 66 hash = hash || []; 67 hash.push({ 68 id : id, 69 menuStyle: $.extend({}, defaults.menuStyle, options.menuStyle || {}), 70 itemStyle: $.extend({}, defaults.itemStyle, options.itemStyle || {}), 71 itemHoverStyle: $.extend({}, defaults.itemHoverStyle, options.itemHoverStyle || {}), 72 bindings: options.bindings || {}, 73 shadow: options.shadow || options.shadow === false ? options.shadow : defaults.shadow, 74 onContextMenu: options.onContextMenu || defaults.onContextMenu, 75 onShowMenu: options.onShowMenu || defaults.onShowMenu, 76 eventPosX: options.eventPosX || defaults.eventPosX, 77 eventPosY: options.eventPosY || defaults.eventPosY 78 }); 79 80 var index = hash.length - 1; 81 $(this).bind('contextmenu', function(e) { 82 // Check if onContextMenu() defined 83 var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true; 84 if (bShowContext) display(index, this, e, options); 85 return false; 86 }); 87 return this; 88 }; 89 90 function display(index, trigger, e, options) { 91 var cur = hash[index]; 92 content = $('#'+cur.id).find('ul:first').clone(true); 93 content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover( 94 function() { 95 $(this).css(cur.itemHoverStyle); 96 }, 97 function(){ 98 $(this).css(cur.itemStyle); 99 } 100 ).find('img').css({verticalAlign:'middle',paddingRight:'2px'}); 101 102 // Send the content to the menu 103 menu.html(content); 104 105 // if there's an onShowMenu, run it now -- must run after content has been added 106 // if you try to alter the content variable before the menu.html(), IE6 has issues 107 // updating the content 108 if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu); 109 110 $.each(cur.bindings, function(id, func) { 111 $('#'+id, menu).bind('click', function(e) { 112 hide(); 113 func(trigger, currentTarget); 114 }); 115 }); 116 117 menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).show(); 118 if (cur.shadow) shadow.css({width:menu.width(),height:menu.height(),left:e.pageX+2,top:e.pageY+2}).show(); 119 $(document).one('click', hide); 120 } 121 122 function hide() { 123 menu.hide(); 124 shadow.hide(); 125 } 126 127 // Apply defaults 128 $.contextMenu = { 129 defaults : function(userDefaults) { 130 $.each(userDefaults, function(i, val) { 131 if (typeof val == 'object' && defaults[i]) { 132 $.extend(defaults[i], val); 133 } 134 else defaults[i] = val; 135 }); 136 } 137 }; 138 139 })(jQuery); 140 141 $(function() { 142 $('div.contextMenu').hide(); 143 });
主要js代码：
1 //右键菜单 2 $('#dome').contextMenu('myMenu', 3 { 4 //菜单样式 5 menuStyle: { 6 border: '1px solid #333', 7 borderRadius: '4px', 8 }, 9 //菜单项样式 10 itemStyle: { 11 border: 'none' 12 }, 13 //菜单项鼠标放在上面样式 14 itemHoverStyle: { 15 color: '#333', 16 backgroundColor: 'rgba(98, 195, 186, 0.5)', 17 border: 'none' 18 }, 19 //事件 20 bindings: 21 { 22 'open1': function(t) { 23 alert('open1'); 24 }, 25 'open2': function(t) { 26 alert('open2'); 27 }, 28 'open3': function(t) { 29 alert('open3'); 30 }, 31 'open4': function(t) { 32 alert('open4'); 33 } 34 } 35 });
