点击这里体验效果
如果要屏蔽页面原来的右键菜单，请设置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>
