jquery 自定义右键菜单
如果要自定义右键菜单，那么就需要禁止原本的右键菜单，代码如下
document.oncontextmenu = new Function("return false;");//禁止右键默认菜单
该自定义右键菜单是基于jquery上的
html+css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
*{ margin:0; padding:0; }
#js-right-menu{ background-color:#fff; z-index:9999; }
#js-right-menu a{ color:#333; display:block; text-decoration:none; font-size:14px; height:25px; line-height:25px; border:1px solid #fff; padding:0 10px; }
#js-right-menu a:hover{ background-color:#eee; border-color:#ddd; }
.mydiv1{ background:#f8f8f8; width:200px; height:300px; }
.mydiv2{ background:#ddd; width:200px; height:100px; }
</style>
</head>
<body>
<div id="mydiv" style="border:1px solid #ddd; height:400px; width:400px;">
<div class="mydiv1"></div>
<div class="mydiv2"></div>
</div> <script src="js/jquery-1.8.2.min.js"></script>
<script src="js/rightMenu.js"></script>
<script>
$(function(){
$("#mydiv").rightMenu({_width:"200px",fun:["deleteDom","nextDom","prevDom"]});//有三个默认的菜单
$(".mydiv1").rightMenu({_width:"200px",menu:["删除"],fun:["deleteDom"]});//只有删除菜单
$(".mydiv2").rightMenu({_width:"200px",menu:[],fun:[]});//没有右键菜单
});
</script>
</body>
</html>
rightMenu.js:
function deleteDom(){
event.stopPropagation();
alert("删除");
rightMenu.removeDom();
}
function nextDom(){
event.stopPropagation();
alert("下一个");
rightMenu.removeDom();
}
function prevDom(){
event.stopPropagation();
alert("上一个");
rightMenu.removeDom();
}
function rightMenu(opt){//右键菜单
this.cfg = $.extend({
_width:"400px",
menu: ["删除","下一个","上一个"],
fun: ["","function(){}","function(){}"]
},opt || {});
}
rightMenu.removeDom = function(){//移除菜单
var menuDom = document.getElementById("js-right-menu");
menuDom ? document.body.removeChild(menuDom) : "";
}
rightMenu.stopPropagationFun = function(e){//阻止冒泡事件
if(e && e.stopPropagation){
e.stopPropagation();
}else{ //if IE
window.event.cancelBubble = true;
}
}
rightMenu.prototype.creatDom = function(e){//创建节点
var dom = document.createElement("div");
var str = "";
var pageX = e.clientX;
var pageY = e.clientY;
var screenW = $(window).width();
var screenH = $(window).height();
var lft = (pageX+parseInt(this.cfg._width))>screenW ? ((pageX-parseInt(this.cfg._width))<?pageX:(pageX-parseInt(this.cfg._width)))+"px" : pageX+"px";
var top = 0;
var domH = 0;
//设置样式
dom.setAttribute("id","js-right-menu");
dom.style.cssText = 'width:'+(parseInt(this.cfg._width)-6)+'px;position:absolute;top:'+pageY+'px;left:'+lft+';height:auto;border:1px solid #ddd;padding:2px;';
for(var i=0; i<this.cfg.menu.length; i++){
str += '<p><a href="javascript:;" id="js-alertMenu'+i+'" onmousedown="'+this.cfg.fun[i]+'()">'+this.cfg.menu[i]+'</a></p>';
}
dom.innerHTML = str;
document.body.appendChild(dom);
domH = $(dom).outerHeight();
top = (pageY+domH)>screenH ? (pageY-domH)+"px" : pageY+"px";
dom.style.top = top;
}
rightMenu.prototype.mouseEvent = function(e){//鼠标事件
rightMenu.stopPropagationFun(e);//阻止冒泡事件
document.oncontextmenu = new Function("return false;");//禁止右键默认菜单
var tagDom = $(e.target);
if(tagDom.hasClass("js-right-menu") || tagDom.parents(".js-right-menu").length){
return false;
}
rightMenu.removeDom();
if(e.button === 2 && (this.cfg.menu.length === this.cfg.fun.length) && this.cfg.menu.length){
this.creatDom(e);
}
}
;(function($){
$.fn.rightMenu = function(opt){
var self = $(this);
document.onmousedown = function(e){
rightMenu.removeDom();//删除节点
}
self.mousedown(function(e){
rightMenu.stopPropagationFun(e);//阻止冒泡事件
var menuEvent = new rightMenu(opt);
menuEvent.mouseEvent(e);
});
}
})(jQuery);
如果不需要有右键菜单，只需给$(".mydiv2").rightMenu({_width:"200px",menu:[],fun:[]});中的menu或fun设置为空数组即可
jquery 自定义右键菜单的更多相关文章
- jQuery自定义右键菜单
首先看下效果,效果在最下面: 代码: body { font-size: 12px; margin: 0px; padding: 0px; } form,div,ul,li { margin: 0px ...
- js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）
js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...
- 自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]
许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...
- ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
- JavaScript自定义右键菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS简单实现自定义右键菜单
RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...
- antd Tree组件中，自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
- AS3.0 自定义右键菜单类
AS3.0 自定义右键菜单类: /** * 自定义右键菜单类 * 自定义菜单项不得超过15个,每个标题必须至少包含一个可见字符. * 标题字符不能超过100个,并且开头的空白字符会被忽略. * 与任何 ...
- js之自定义右键菜单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 浏览器渲染优化4(styles and layout)
你已经学会了查找和解决问题.希望你的js能正常运行了,但这只是制作帧的一小部分.在这节课里,你将处理样式,也就是像开发工具里标记的那样,重新计算样式.学完这节课后,你将学会从样式计算过程中找到性能问题 ...
- Linux软链接硬链接的区别
ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我们只要在 ...
- Go语言中 Print，Println 和 Printf 的区别（八）
Print 和 Println 这两个打印方式类似,只在格式上有区别 1. Println 打印的每一项之间都会有空行,Print 没有,例如: fmt.Println("go", ...
- 比反射更快！使用ASM获取class信息（ClassReader）
比反射更快!使用ASM获取class信息(ClassReader) 通常我们想要在java运行时获取class的信息时,通常使用反射的方式来获取其中的属性,方法,注解等信息.通常是这样的: Class ...
- Python模拟进度条
import time for i in range(0,101,2) time.sleep(0.2) num = i // 2 per = '\r %s %% : %s'%(i,'*'*num) p ...
- JMS消息通信服务
什么是Java消息服务 Java消息服务指的是两个应用程序之间进行异步通信的API,它为标准消息协议和消息服务提供了一组通用接口,包括创建.发送.读取消息等,用于支持JAVA应用程序开发.在J2EE中 ...
- 在Linux中，没有文件创建时间的概念。只有文件的访问时间、修改时间、状态改变时间
在Linux中,没有文件创建时间的概念.只有文件的访问时间.修改时间.状态改变时间.也就是说不能知道文件的创建时间.但如果文件创建后就没有修改过,修改时间=创建时间:如果文件创建后,状态就没有改变过, ...
- Thinkphp5.0快速入门笔记（3）
学习来源与说明 https://www.kancloud.cn/thinkphp/thinkphp5_quickstart 测试与部署均在windows10下进行学习. 快速入门第三节 获取当前的请求 ...
- Docker：Swarm + Stack 一站式部署容器集群
参考1 参考2 1.注意docker的版本,yum默认安装的版本比较低,可能出现 unsupported Compose file version: 3.7 docker版本升级 2.docker-c ...
- 关于解决SpringDataJpa框架实体类表字段创建顺序与数据库表字段展示顺序不一致的问题
今天在公司的项目开发中,遇到一个问题: 后端对象实体类中写入字段顺序与数据库中的存储顺序不一致. 仔细观察到数据库中的表字段的排序方式是按照拼音字母的顺序abcdef......来存储的 而我的实体类 ...