自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]
许多从事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]的更多相关文章
- JS禁用浏览器退格键、禁止右键、禁止全选、复制、粘贴
一.禁用浏览器退格键 摘抄自:https://www.cnblogs.com/wanggd/p/3164536.html 我们在真实的项目开发中经常会使用JS 对键盘上的一些按键进行禁用,常见的比如说 ...
- 纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...
- 谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件
谷歌chrome浏览器自带http抓包工具 chrome://net-internals/ 谷歌chrome浏览器http请求模拟插件:postman 火狐http请求模拟插件:httprequest ...
- 关于自定义tabBar时修改系统自带tabBarItem属性造成的按钮顺序错乱的问题相关探究
关于自定义tabBar时修改系统自带tabBarItem属性造成的按钮顺序错乱的问题相关探究 测试代码:http://git.oschina.net/Xiyue/TabBarItem_TEST 简 ...
- 利用js实现禁用浏览器后退
原博主链接为:http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免 ...
- 利用js实现 禁用浏览器后退
现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作. 所以在有些页面上,适当的禁用浏览器的后退, ...
- chrome调试如何禁用浏览器缓存
0.写在前面的话 遇到过很多很多次,修改了页面代码,但是程序始终没有按照设想的方向走,有时候折腾了几个小时,发现问题最后却是莫名其妙恢复的.后来进一步调试发现,自己已经修改了如js代码,但是前端在载入 ...
- 利用js实现 禁用浏览器后退 浏览器返回
现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作. 所以在有些页面上,适当的禁用浏览器的后退, ...
- angularjs 阻止浏览器自带的回退
$scope.$on('$locationChangeStart', function(e) { if(!tfOrder && comm.getStorage('orederlistL ...
随机推荐
- 来，让我们谈一谈Normalize.css
本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormal ...
- 实例化新的一个(new)
今天越到了一个特别尴尬的问题,其实特别简单就一句代码的事. PlayList pModel = new PlayList(); foreach (XmlNode xn1 in xnl) { ····· ...
- 使用虚拟机在ubuntu下搭建mongoDB开发环境和简单增删改查操作
最近在折腾mongodb和nodejs,在imooc上找了一个mongodb的入门教程,跟着里面一步一步的走,下面记录下我操作的步骤和遇到的问题. 课程地址:http://www.imooc.com/ ...
- mysql存储引擎(mysql学习六)
存储引擎 现在只有InnoDB支持外键 上接着学习笔记五 class表中有外键,所以不能修改存储引擎 表类型 默认的服务器表类型,通过my.ini可以配置 Default-storage-e ...
- adb 修改system文件
1. $ adb push SecureSetting.apk /sdcard/ // 上传要安装的文件,为安装做准备. 2. $ adb shell 3. $ su // 切换到 ...
- 在EF的code frist下写稳健的权限管理系统：界面设计（四）
基本都是采用pure设计(中文官网:http://purecss.org,英文官网:http://purecss.io).pure只是一个简单强大的cssUI库,支持响应式设计,适合自己设计或者给美工 ...
- python 装饰器(decorator)
装饰器(decorator) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 装饰器(decorator)是一种高级Python语 ...
- 深入理解Java String#intern() 内存模型
原文出处: codelog.me 大家知道,Java中string.intern()方法调用会先去字符串常量池中查找相应的字符串,如果字符串不存在,就会在字符串常量池中创建该字符串然后再返回. 字符串 ...
- Oracle 错误代码
ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会话数 ORA-00019: 超出最大会话许可数 ORA-00020: 超出 ...
- NOJ1142-最大连续和
最大连续和 时间限制(普通/Java) : 1000 MS/ 3000 MS 运行内存限制 : 65536 KByte总提交 : 1282 测试通过 : 230 ...