自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--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 ...
随机推荐
- android版猜拳游戏源码分享
android版猜拳游戏源码分享安卓版猜拳游戏源码,该文件中带有安装测试包的,这个游戏源码比较简单的,现在有两个代码,一个自定义VIEW的,一个就是普通的imageView图片,游戏非常适合一些新手的 ...
- Winform开发常用控件之Checkbox和CheckedListBox
Winform的开发基本都是基于控件事件的,也就是事件驱动型的. 多选框的放置和值的获取有很多种,这里介绍几个简单常用的方法 1.直接放置Checkbox,并获取Checkbox的值 上图 做法也非常 ...
- Web前端性能优化的9大问题
1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...
- LotusPhp中配置文件组件LtConfig详解
LotusPhp中配置文件组件LtConfig是约定的一个重要组成部分,适用于多个场景,多数的LotusPhp组件如数据库,缓存,RBAC,表单验证等都需要用到配置组件,LtConfig配置组件也是L ...
- ruby 程序中的文字编码
1,问题 在写一个统计代码行数的脚本时遇到一个问题: 代码: file_name = "code.rb"c = 0File.foreach(file_name) do |x| ne ...
- 在openSUSE13.2上gem install rails -v 4.1成功，但是之后不存在rails命令解决
解决方案为,不要用sudo gem install就好了,卧槽
- Node.js学习笔记 01 搭建静态服务器
希望这篇文章能解决你这样一个问题:“我现在已经了解了一些Node.Js基本概念了,怎么搭一台静态服务器呢?” 请参考一下博主的前两篇文章: 完全面向于初学者的Node.js指南 Node.Js的Mod ...
- C 构造一个 简单配置文件读取库
前言 最近看到这篇文章, json引擎性能对比报告 http://www.oschina.net/news/61942/cpp-json-compare?utm_source=tuicool 感觉技术 ...
- listview 优化
ListView的优化: (前两点都是利用ListView的自身优化机制优化[缓存优化]) 1.利用ListView自身的缓存机制,他会缓存条目中的一个条目item,当listview第一屏显示完成之 ...
- Android中BaseAdapter的基本用法和加载自定义布局!
public class MainActivity extends Activity { ListView listView = null; @Override protected void onCr ...