jquery右键菜单

最新推荐文章于 2026-07-14 07:15:04 发布

转载最新推荐文章于 2026-07-14 07:15:04 发布 · 474 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.mk2048.com/blog/blog_hjch2c2ikihj.html

收录于

前端

点击这里体验效果

如果要屏蔽页面原来的右键菜单，请设置disable_native_context_menu:true

以下是源代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title>jQuery右键菜单，上下文菜单-柯乐义</title>
  5 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js"
  6 charset="utf-8"></script>
  7 <style type="text/css" media="screen">
  8 html, body
  9 {
 10 height: 100%;
 11 }
 12 
 13 body
 14 {
 15 font-family: 'lucida grande' , tahoma, verdana;
 16 font-size: 15px;
 17 color: #555;
 18 width: 700px;
 19 margin: 0 auto;
 20 padding: 30px 0;
 21 }
 22 
 23 h1, h2
 24 {
 25 color: #222;
 26 }
 27 
 28 ul
 29 {
 30 list-style-type: none;
 31 list-style-position: inside;
 32 margin: 0;
 33 padding: 0;
 34 }
 35 
 36 /* all context menus have this class */
 37 .context-menu
 38 {
 39 -webkit-border-radius: 5px;
 40 -moz-border-radius: 5px;
 41 border-radius: 5px;
 42 background-color: #f2f2f2;
 43 border: 1px solid #999;
 44 list-style-type: none;
 45 margin: 0;
 46 padding: 0;
 47 }
 48 .context-menu a
 49 {
 50 display: block;
 51 padding: 3px;
 52 text-decoration: none;
 53 color: #333;
 54 }
 55 .context-menu a:hover
 56 {
 57 background-color: #666;
 58 color: white;
 59 }
 60 
 61 /* second context menu */
 62 #context-menu-2
 63 {
 64 border: 1px solid #333;
 65 background-color: orange;
 66 margin: 0;
 67 padding: 0;
 68 }
 69 
 70 
 71 .target1, .target2 li, .target3 li
 72 {
 73 background-color: #ddd;
 74 color: #333;
 75 border: 1px solid #c6c6c6;
 76 padding: 5px;
 77 }
 78 
 79 .target1
 80 {
 81 width: 130px;
 82 }
 83 
 84 .target2 li, .target3 li
 85 {
 86 margin-top: 5px;
 87 }
 88 
 89 .target1 li.green, .target2 li.green, .target3 li.green
 90 {
 91 background-color: green;
 92 color: #fff;
 93 }
 94 
 95 .big-font
 96 {
 97 font-size: 25px;
 98 }
 99 </style>
100 </head>
101 <body>
102 <h1>
103 jQuery右键菜单示例·柯乐义</h1>
104 <h2>
105 例 1</h2>
106 <p>
107 单个div的上下文菜单。 Note that the native context menu is disabled by passing {disable_native_context_menu:
108 true} as the options hash and last argument of the plugin. The native context menu
109 is enabled by default.
110 </p>
111 <div class="target1">
112 右击我</div>
113 <h2>
114 例 2 - 使用鼠标左键点击</h2>
115 <p>
116 You can use the same syntax, but use any other selector to target multiple elements
117 with the same context menu. Notice the leftClick: true which indicates that it should
118 trigger on left click instead of right click.
119 </p>
120 <ul class="target2">
121 <li>请左击我，右击没效果。</li>
122 <li>请左击我，右击没效果。</li>
123 <li>请左击我，右击没效果。</li>
124 </ul>
125 <a href ="http://keleyi.com/a/bjac/qjaheda1.htm" target="_blank">原文</a><br />
126 <h2>
127 例 3 - 突出当前点击项</h2>
128 <p>
129 You can use the showMenu and hideMenu options to highlight the current context menu
130 target.
131 </p>
132 <ul class="target3">
133 <li>右击我</li>
134 <li>右击我</li>
135 <li>右击我</li>
136 </ul>
137 <div>
138 本插件的不足支出就是不支持jquery1.9以上版本。</div>
139 <script src="http://keleyi.com/keleyi/phtml/jqplug/8/jquery.contextMenu.js" type="text/javascript" charset="utf-8"></script>
140 <script type="text/javascript" charset="utf-8">
141 $(document).ready(function () {
142 //例1
143 $('.target1').contextMenu('context-menu-1', {
144 '右键菜单项1': {
145 click: function (element) { // element is the jquery obj clicked on when context menu launched
146 alert('点击了右键菜单项');
147 },
148 klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
149 },
150 '右键菜单项2': {
151 click: function (element) { alert('点击了第二项'); },
152 klass: "second-menu-item"
153 }, '返回首页': { click: function (element) { location.href = "http://keleyi.com"; } }
154 });
155 //例2
156 $('.target2 li').contextMenu('context-menu-2', {
157 '彩上绿色!': {
158 click: function (element) { // element is the jquery obj clicked on when context menu launched
159 element.addClass('green');
160 },
161 klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
162 },
163 '变大!': {
164 click: function (element) { element.addClass('big-font') },
165 klass: "second-menu-item"
166 }, '打开原文': { click: function (element) { window.open("http://keleyi.com/a/bjac/qjaheda1.htm"); } }
167 }, { disable_native_context_menu: true, leftClick: true }
168 );
169 //例3
170 $('.target3 li').contextMenu('context-menu-2', {
171 '变大!': {
172 click: function (element) { element.addClass('big-font') },
173 klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
174 }
175 }, {
176 disable_native_context_menu: true,
177 showMenu: function (element) { element.addClass('green'); },
178 hideMenu: function (element) { element.removeClass('green'); }
179 });
180 });
181 </script>
182 </body>
183 </html>