jquery 简短右键菜单 多浏览器兼容


Posted in Javascript onJanuary 01, 2010
$(function(){ 
document.oncontextmenu=function(){return false;}//屏蔽右键 
document.onmousemove=mouseMove;//记录鼠标位置 
}); 
var mx=0,my=0; 
function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;} 
function mouseCoords(ev){ 
if(ev.pageX||ev.pageY){return{x:ev.pageX,y:ev.pageY};} 
return{x:ev.clientX,y:ev.clientY+$(document).scrollTop()}; 
} $.fn.extend({RightMenu: function(id,options){options = $.extend({menuList:[]},options);var menuCount=options.menuList.length; 
if (!$("#"+id)[0]){ 
var divMenuList="<div id=\""+id+"\" class=\"div_RightMenu\"><div><ul class='ico'>"; 
for(var i=0;i<menuCount;i++){ 
divMenuList+="<li class=\"RMli_"+options.menuList[i].menuclass+"\" onclick=\""+options.menuList[i].clickEvent+"\">"+options.menuList[i].menuName+"</li>"; 
} 
divMenuList += "</ul></div><div>"; 
$("body").append(divMenuList).find("#"+id).hide().find("li") 
.bind("mouseover",function(){$(this).addClass("RM_mouseover");}) 
.bind("mouseout",function(){$(this).removeClass("RM_mouseover");}); 
$(document).click(function(){$("#"+id).hide();}); 
} 
return this.each(function(){ 
this.oncontextmenu=function(){ 




/*这段 判断鼠标移到页面的最右侧或者最下侧 防止出现滚动条 {*/ 
var mw=$('body').width(),mhh=$('html').height(),mbh=$('body').height(), 
w=$('#'+id).width(),h=$('#'+id).height(), 
mh=(mhh>mbh)?mhh:mbh;//最大高度 比较html与body的高度 
if(mh<h+my){my=mh-h;}//超 高 
if(mw<w+mx){mx=mw-w;}//超 宽 



/*} 当然也可以直接跳过*/ 
$("#"+id).hide().css({top:my,left:mx}).show(); 
} 
}); 
} 
});

在线演示 右键点击测试效果

打包下载

Javascript 相关文章推荐
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 #Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 #Javascript
url 特殊字符 传递参数解决方法
Jan 01 #Javascript
JavaScript 数组循环引起的思考
Jan 01 #Javascript
javascript eval和JSON之间的联系
Dec 31 #Javascript
js下用gb2312编码解码实现方法
Dec 31 #Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 #Javascript
You might like
PHP 多进程 解决难题
2009/06/22 PHP
php文件缓存类汇总
2014/11/21 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
玩转python爬虫之正则表达式
2016/02/17 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
为什么相对PHP黑python的更少
2020/06/21 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
C语言笔试题
2014/09/04 面试题
C语言面试题
2015/10/30 面试题
日期和时间问题
2015/01/04 面试题
工程管理专业个人求职信范文
2013/12/07 职场文书
酒店员工检讨书
2014/02/18 职场文书
新闻人物通讯稿
2014/10/09 职场文书
离婚协议书范本2014
2014/10/27 职场文书
以权谋私检举信范文
2015/03/02 职场文书
指导教师推荐意见
2015/06/05 职场文书
学前教育见习总结
2015/06/23 职场文书
交流会主持词
2015/07/02 职场文书
导游词之镇江焦山
2019/11/21 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript