自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--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 ...
随机推荐
- 树莓派 B+ Yeelink实现图像监控
树莓派 B+ Yeelink实现图像监控 数值传感器请参考 : http://blog.csdn.net/xiabodan/article/details/39084877 1 安装摄像头 ...
- 无法运行maven项目
tomcat Server Location 选择 User Tomcat installation 设置CATALINA_HOME环境变量(tomcat start.bat启动不了)1.CATALI ...
- Sublime Text 使用 Emmet 补全错误问题
Sublime Text安装了Emmet后,使用Tab或者ctrl+e发现补全有问题,如: div.testClass#testId 变成了 div.<testClass id="te ...
- [leetcode]_Balanced Binary Tree
第四道树题,逐渐能写递归了.虽然最后AC的代码还是看了网络,但是距离成功攻克此类问题仅一步之遥. 题目:一棵树,判断是否为AVL.(AVL条件:树上任意一点的左右子树的高度差<=1) 思路:树依 ...
- PHP 文件上传服务端及客户端配置参数说明
文件上传服务器端配置: ·file_uploads = On, 支持HTTP上传 ·upload_tmp_dir = , 临时文件保存的目录 ·upload_max_filesize=2M, 允许上传 ...
- php如何实现页面回退的两种方法
发布:thatboy 来源:网络 [大 中 小] 你有没有遇到过这样的情况:表单出错而返回页面时,之前填写的信息全不见了.本文为大家介绍二种支持php页面回退的方法,供大家参考. 本文原始链接: ...
- wordpress学习-themes-001
这一篇主要是来记录wordpress theme的内容.关于为什么要自己编写wordpress theme的理由,相信大家都有各自的体会.想让自己的博客变的更加突出?更加个性话?wordpress t ...
- php验证手机号码
大家都应该有这个常识,中国的手机号码都是以数字“1”开头,然后利用“0~9”10个数字组成的11位数字组合,那么我们的验证规则肯定要根据这个思路来写. 根据上面的简单思路,我们便可以写下以下的验证代码 ...
- SQL Server 基础：Cast和Convert的区别
CAST 和 CONVERT 都可以将某种数据类型的表达式显式转换为另一种数据类型. 语法: CAST ( expression AS data_type ) CONVERT (data_type[( ...
- ASP.NET中前台调用后台的方法
学习文章:http://www.cnblogs.com/kingteach/archive/2010/11/12/1875633.html 练习代码: 前台: <html xmlns=" ...