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 showModalDialog模态对话框使用说明
Dec 31 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
使用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连接MySQL代码的参数说明
2008/06/07 PHP
PHP自定义函数收代码
2010/08/01 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python解析xml中dom元素的方法
2015/03/12 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
Python 存取npy格式数据实例
2020/07/01 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
生物技术专业毕业生求职信范文
2013/12/14 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
成绩单家长意见
2015/06/03 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书