许多从事Web开发的会发现有些事，我们需要禁用浏览器本事自带的右键菜单，而实现自定义的右键菜单
下面我们也来实现一个自定义的右键菜单

首先来创建JSP页面

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 <html>

 <head>

 <title>右键菜单</title>

 <script src="js/jquery.min.js"></script>

 </head>

 <link rel="stylesheet" type="text/css" href="css/demo.css">

 <link rel="stylesheet" type="text/css" href="css/context.standalone.css">

 <script src="js/context.js"></script>

 <script src="js/demo.js"></script>

 <body>

     <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>

 </body>

 </html>

这里来控制一个文本区域内浏览器自带的右键菜单禁用，使用自定义菜单

 /**

  *@ trimmer Visec·Dana

  *@ time 2014-7-23

  **/

 var context = context || (function () {

     var options = {

         fadeSpeed: ,

         filter: function ($obj) {

         },

         above: 'auto',

         preventDoubleContext: true,

         compress: false

     };

     function initialize(opts){

         options = $.extend({}, options, opts);

         $(document).on('click', 'html', function () {

             $('.dropdown-context').fadeOut(options.fadeSpeed, function(){

                 $('.dropdown-context').css({display:''}).find('.drop-left').removeClass('drop-left');

             });

         });

         if(options.preventDoubleContext){

             $(document).on('contextmenu', '.dropdown-context', function (e) {

                 e.preventDefault();

             });

         }

         $(document).on('mouseenter', '.dropdown-submenu', function(){

             var $sub = $(this).find('.dropdown-context-sub:first'),

                 subWidth = $sub.width(),

                 subLeft = $sub.offset().left,

                 collision = (subWidth+subLeft) > window.innerWidth;

             if(collision){

                 $sub.addClass('drop-left');

             }

         });

     }

     function updateOptions(opts){

         options = $.extend({}, options, opts);

     }

     function buildMenu(data, id, subMenu){

         var subClass = (subMenu) ? ' dropdown-context-sub' : '',

             compressed = options.compress ? ' compressed-context' : '',

             $menu = $('<ul class="dropdown-menu dropdown-context' + subClass + compressed+'" id="dropdown-' + id + '"></ul>');

         var i = , linkTarget = '';

         for(i; i<data.length; i++){

             if (typeof data[i].divider !== 'undefined'){

                 $menu.append('<li class="divider"></li>');

             } else if (typeof data[i].header !== 'undefined'){

                 $menu.append('<li class="nav-header">' + data[i].header + '</li>');

             } else {

                 if (typeof data[i].href == 'undefined'){

                     data[i].href = '#';

                 }

                 if (typeof data[i].target !== 'undefined'){

                     linkTarget = ' target="'+data[i].target+'"';

                 }

                 if (typeof data[i].subMenu !== 'undefined'){

                     $sub = ('<li class="dropdown-submenu"><a tabindex="-1" href="' + data[i].href + '">' + data[i].text + '</a></li>');

                 }else{

                     $sub = $('<li><a tabindex="-1" href="' + data[i].href + '"'+linkTarget+'>' + data[i].text + '</a></li>');

                 }

                 if (typeof data[i].action !== 'undefined'){

                     var actiond = new Date(),

                         actionID = 'event-' + actiond.getTime() * Math.floor(Math.random()*),

                         eventAction = data[i].action;

                     $sub.find('a').attr('id', actionID);

                     $('#' + actionID).addClass('context-event');

                     $(document).on('click', '#' + actionID, eventAction);

                 }

                 $menu.append($sub);

                 if (typeof data[i].subMenu != 'undefined'){

                     var subMenuData = buildMenu(data[i].subMenu, id, true);

                     $menu.find('li:last').append(subMenuData);

                 }

             }

             if (typeof options.filter == 'function') {

                 options.filter($menu.find('li:last'));

             }

         }

         return $menu;

     }

     function addContext(selector, data){

         var d = new Date(),

             id = d.getTime(),

             $menu = buildMenu(data, id);

         $('body').append($menu);

         $(document).on('contextmenu', selector, function (e){

             e.preventDefault();

             e.stopPropagation();

             $('.dropdown-context:not(.dropdown-context-sub)').hide();

             $dd = $('#dropdown-' + id);

             if (typeof options.above == 'boolean' && options.above) {

                 $dd.addClass('dropdown-context-up').css({

                     top: e.pageY -  - $('#dropdown-' + id).height(),

                     left: e.pageX -

                 }).fadeIn(options.fadeSpeed);

             } else if (typeof options.above == 'string' && options.above == 'auto'){

                 $dd.removeClass('dropdown-context-up');

                 var autoH = $dd.height() + ;

                 if ((e.pageY + autoH) > $('html').height()){

                     $dd.addClass('dropdown-context-up').css({

                         top: e.pageY -  - autoH,

                         left: e.pageX -

                     }).fadeIn(options.fadeSpeed);

                 } else {

                     $dd.css({

                         top: e.pageY + ,

                         left: e.pageX -

                     }).fadeIn(options.fadeSpeed);

                 }

             }

         });

     }

     function destroyContext(selector) {

         $(document).off('contextmenu', selector).off('click', '.context-event');

     }

     return {

         init: initialize,

         settings: updateOptions,

         attach: addContext,

         destroy: destroyContext

     };

 })();

context.js主要来编写自定义右键菜单对应的功能连接
下面的demo.js则是菜单的编辑与显示的样式

 /**

  * @trimmer Visec·Dana

  * @time 2014-7-23

  */

 $(document).ready(function(){

     /**

      * 右键菜单信息

      * text 文本内容

      * href 链接地址ַ

      */

     context.settings({compress: true});   //字体属性大小

     context.attach('html',[

         {header: '菜单栏'},

         {divider: true},      //控制实线

         {text: '后退', href: '#'},

         {text: '前进', href: '#'},

         {divider: true},

         {text: '菜单信息1', href: '#'},

         {text: '菜单信息1', href: '#'},

         {text: '菜单信息1', href: '#'},

         {text: '菜单信息1', href: '#'},

         {divider: true},

         {text: '菜单信息1', href: '#'},

         {divider: true},

         {text: '禁用自定义菜单', action: function(e){

             e.preventDefault();

             context.destroy('html');

             alert('确定要禁用吗？');

         }},

     ]);

     context.init({preventDoubleContext: false});  //单击左键关闭右键菜单

 });

这里是我编写的一个Demo的文件结构图，还有一些CSS文件信息代码，我就不贴了，文件已共享！

Demo下载：http://yunpan.cn/Q7BVXNGXdSvYB  访问密码 04d9

自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]的更多相关文章

  1. JS禁用浏览器退格键、禁止右键、禁止全选、复制、粘贴

    一.禁用浏览器退格键 摘抄自:https://www.cnblogs.com/wanggd/p/3164536.html 我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说 ...

  2. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

  3. 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件

    谷歌chrome浏览器自带http抓包工具 chrome://net-internals/ 谷歌chrome浏览器http请求模拟插件:postman 火狐http请求模拟插件:httprequest ...

  4. 关于自定义tabBar时修改系统自带tabBarItem属性造成的按钮顺序错乱的问题相关探究

      关于自定义tabBar时修改系统自带tabBarItem属性造成的按钮顺序错乱的问题相关探究 测试代码:http://git.oschina.net/Xiyue/TabBarItem_TEST 简 ...

  5. 利用js实现禁用浏览器后退

    原博主链接为:http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免 ...

  6. 利用js实现 禁用浏览器后退

    现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.        所以在有些页面上,适当的禁用浏览器的后退, ...

  7. chrome调试如何禁用浏览器缓存

    0.写在前面的话 遇到过很多很多次,修改了页面代码,但是程序始终没有按照设想的方向走,有时候折腾了几个小时,发现问题最后却是莫名其妙恢复的.后来进一步调试发现,自己已经修改了如js代码,但是前端在载入 ...

  8. 利用js实现 禁用浏览器后退 浏览器返回

    现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.        所以在有些页面上,适当的禁用浏览器的后退, ...

  9. angularjs 阻止浏览器自带的回退

    $scope.$on('$locationChangeStart', function(e) { if(!tfOrder && comm.getStorage('orederlistL ...

随机推荐

  1. 基于s5pv210嵌入式linux使用其他动态、静态库文件程序的交叉编译

    刚刚移植了sqlite3迫切想测试一些,结果将原来在ubuntu系统下写好且测试通过的程序,重新编译就报错,无法找到已定义的函数 这是由于没有使用库或者使用了错误的就.库造成的结果. 正确做法为: a ...

  2. Java设计模式-Builder生成器模式

    概念: 生成器模式也称之为建造者模式.生成器模式的意图在于将一个复杂的构建与其表示相分离,构建与产品分离. UML: Ibuild接口清晰地反映了创建产品Product的流程. 生成器模式涉及4个关键 ...

  3. 高仿QQ的即时通讯应用带服务端软件安装

    Android 基于xmpp协议,smack包,openfire服务端(在下面)的高仿QQ的即时通讯实现.实现了注册,登录,读取好友列表,搜索好友,添加分组,添加好友,删除好友,修改心情,两个客户端之 ...

  4. SubsetsTotal Accepted:49746Total Submissions:176257My Submissions

    Subsets Total Accepted: 49746 Total Submissions: 176257My Submissions Given a set of distinct intege ...

  5. Install SQLite

    http://www.tutorialspoint.com/sqlite/sqlite_installation.htm The SQLite is famous for its great feat ...

  6. crontab的使用说明

    网上瞎转载的,仅供参考 名称 : crontab 使用权限 : 所有使用者 使用方式 : crontab file [-u user]-用指定的文件替代目前的crontab. crontab-[-u ...

  7. 线程池（C#）

    转自:http://blog.sina.com.cn/s/blog_494305f30100ryw7.html 在这里你可以学到Microsoft研究CLR实现线程池的原理机制,从而更灵活的处理CLR ...

  8. SDUST 作业10 Problem D 魔方阵

    Description 所谓N阶魔方阵,是一个N*N的方阵,其元素由1到N^2组成,且方阵每行每列以及对角线的元素和相等.如三阶魔方阵: 8 1 6 3 5 7 4 9 2     魔方阵的规律如下: ...

  9. excel上传和下载

    需要注意的地方: 1.js构造表单并提交 2.js中文传参encodeURI(encodeURI("中文")),action接收并转换value = URLDecoder.deco ...

  10. 解决：JS如何取得当前正在执行的function的名字

    代码如下 function getFName(fn){ return (/^[\s\(]*function(?:\s+([\w$_][\w\d$_]*))?\(/).exec(fn.toString( ...