许多从事Web开发的会发现有些事，我们需要禁用浏览器本事自带的右键菜单，而实现自定义的右键菜单 下面我们也来实现一个自定义的右键菜单
首先来创建JSP页面
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2 <html>
3 <head>
4 <title>右键菜单</title>
5 <script src="js/jquery.min.js"></script>
6 </head>
7 <link rel="stylesheet" type="text/css" href="css/demo.css">
8 <link rel="stylesheet" type="text/css" href="css/context.standalone.css">
9 <script src="js/context.js"></script>
10 <script src="js/demo.js"></script>
11 <body>
12 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>
13 </body>
14 </html>
这里来控制一个文本区域内浏览器自带的右键菜单禁用，使用自定义菜单
1 /**
2 *@ trimmer Visec·Dana
3 *@ time 2014-7-23
4 **/
5 var context = context || (function () {
6 var options = {
7 fadeSpeed: 100,
8 filter: function ($obj) {
9 },
10 above: 'auto',
11 preventDoubleContext: true,
12 compress: false
13 };
14
15 function initialize(opts){
16 options = $.extend({}, options, opts);
17 $(document).on('click', 'html', function () {
18 $('.dropdown-context').fadeOut(options.fadeSpeed, function(){
19 $('.dropdown-context').css({display:''}).find('.drop-left').removeClass('drop-left');
20 });
21 });
22 if(options.preventDoubleContext){
23 $(document).on('contextmenu', '.dropdown-context', function (e) {
24 e.preventDefault();
25 });
26 }
27 $(document).on('mouseenter', '.dropdown-submenu', function(){
28 var $sub = $(this).find('.dropdown-context-sub:first'),
29 subWidth = $sub.width(),
30 subLeft = $sub.offset().left,
31 collision = (subWidth+subLeft) > window.innerWidth;
32 if(collision){
33 $sub.addClass('drop-left');
34 }
35 });
36
37 }
38
39 function updateOptions(opts){
40 options = $.extend({}, options, opts);
41 }
42
43 function buildMenu(data, id, subMenu){
44 var subClass = (subMenu) ? ' dropdown-context-sub' : '',
45 compressed = options.compress ? ' compressed-context' : '',
46 $menu = $('<ul class="dropdown-menu dropdown-context' + subClass + compressed+'" id="dropdown-' + id + '"></ul>');
47 var i = 0, linkTarget = '';
48 for(i; i<data.length; i++){
49 if (typeof data[i].divider !== 'undefined'){
50 $menu.append('<li class="divider"></li>');
51 } else if (typeof data[i].header !== 'undefined'){
52 $menu.append('<li class="nav-header">' + data[i].header + '</li>');
53 } else {
54 if (typeof data[i].href == 'undefined'){
55 data[i].href = '#';
56 }
57 if (typeof data[i].target !== 'undefined'){
58 linkTarget = ' target="'+data[i].target+'"';
59 }
60 if (typeof data[i].subMenu !== 'undefined'){
61 $sub = ('<li class="dropdown-submenu"><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>');
62 }