自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--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 ...
随机推荐
- Java设计模式(Design Patterns In Java)读书摘要——第1章 绪论
为何需要模式 模式是做事的方法,是实现目标,研磨技术的方法.通俗点说,模式是为了解决某个行业的某个问题的有效的方法或技艺. 为何需要设计模式 为了提升代码的水准,是代码变得简洁而易用.模式是一种思想, ...
- 面向初学者的 Windows 10 UWP 应用开发
眼看 Windows 10 for Mobile 正式版也快要推送了,就先挖个坑吧,原文视频链接为:Windows 10 development for absolute beginners,以下博客 ...
- Cookie禁用了，Session还能用吗?
Cookie与Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案.Cookie分为两种,一种可以叫做session ...
- iptables用法
iptables -t nat -A PREROUTING -s 10.10.10.0/24 -i eth1 -p tcp --dport 80 -j REDIRECT --to-ports 3128 ...
- JS焦点图 上下翻动 支持IE6
<div class="slider"> <ul class="num" id="homePushName"> &l ...
- Cassandra 备份 - 1 - 节点镜像恢复
之前比较关注如何使用Cassandra,但是真正想大规模使用前提还是需要搞清楚备份机制,确保数据安全. 本文主要内容来自文档 "Cassandra2.2"的翻译.最后部分为真实操作 ...
- 【转】MYISAM表批量压缩
关于对MYISAM表的压缩,可以使用myisampack和myisamchk完成(myisampack完之后必须进行myisamchk才能使用压缩后的表,而且是只读的), 其详细地用法可以参考官方文档 ...
- PHP JS HTML ASP页面跳转代码 延时跳转代码 返回到上一界面并刷新 JS弹出指定大小的新窗口
1.PHP延时跳转代码 //跳转到浏览界面 header("Refresh:1;url=machine_list.php"); //不延时 <?php header(&quo ...
- Pure扩展站--个人博客
作为自己css的练习站:http://1111.oyostar.com/.更新自己扩展pure写的css,外加一些jquery的插件.感谢朋友的空间和子域名!
- 解决matplotlib中文乱码问题（Windows）
1.修改matplotlibrc文件 进入Python安装目录下的Lib\site-packages\matplotlib\mpl-data目录,打开matplotlibrc文件,删除font.fam ...