自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--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 ...
随机推荐
- linux内核中的min(x, y)和max(x, y)宏定义
/linux/include/linux/kernel.h中有min(x, y)和max(x, y)的定义如下: #define min(x, y) ({ \ typeof(x) _min1 = x; ...
- Hive[1] 初识 及 安装
本文前提是Hadoop & Java & mysql 数据库,已经安装配置好,并且 环境变量均已经配置到位 声明:本笔记参照 学习<Hive 编程指南>而来,如果有错误 ...
- JqueryMobile动态生成listView并实现刷新的两种方法
本篇文章主要是对JqueryMobile动态生成listView并实现刷新的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JqueryMobile动态生成listView并实现刷新 ...
- iOS Architecture Patterns
By Bohdan Orlov on 21 Mar 2016 - 0 Comments iOS FYI: Slides from my presentation at NSLondon are ava ...
- win2003以isapi的方式配置php+mysql环境（安装了shopEX）
一.准备相关组件 mysql-installer-community-5.5.29.0.zip php-5.2.17-Win32-VC6-x86 ZendOptimizer-3.3.3-Windows ...
- Cannot change version of project facet Dynamic web的解决方法
用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servlet还是2.3的,而一般现 ...
- Vue.js学习 Item13 – 指令系统与自定义指令
基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- 深入浅出MongoDB（三）环境搭建
上次的博文深入浅出MongoDB(二)概述中我们已经将MongoDB的相关概念讲解了一下,接下来我们继续进行MongoDB学习.在学习之前,大家首先需要在自己的电脑上安装MongoDB. 1.安装 安 ...
- angularJS通过post方法下载excel文件
最近工作中遇到,要使用angularJS的post方法来下载excel的情况.网上找到一个帖子:http://stackoverflow.com/questions/22447952/angularj ...