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 menu103 ???menu.html(content);104 105 ???// if there‘s an onShowMenu, run it now -- must run after content has been added106 ???????// if you try to alter the content variable before the menu.html(), IE6 has issues107 ???????// updating the content108 ???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 defaults128 ?$.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 ??????});Jquery实现右键菜单
原文地址：https://www.cnblogs.com/bertha-zm/p/8657784.html