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 相关文章推荐
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
js 轮播效果实例分享
Dec 28 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
JS获取动态添加元素的方法详解
Jul 31 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代码
2010/08/08 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
node 版本切换的实现
2020/02/02 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
python中偏函数partial用法实例分析
2015/07/08 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
解决python报错MemoryError的问题
2018/06/26 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python3中rank函数的用法
2019/11/27 Python
python中property和setter装饰器用法
2019/12/19 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
业务主管岗位职责
2013/11/20 职场文书
工作中个人的自我评价
2013/12/31 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
入队仪式主持词
2015/07/04 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书