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 相关文章推荐
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
用jquery来定位
2007/02/20 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
利用python循环创建多个文件的方法
2018/10/25 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
使用Python 统计高频字数的方法
2019/01/31 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
《都江堰》教学反思
2014/02/07 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
幼儿园见习总结
2015/06/23 职场文书
python状态机transitions库详解
2021/06/02 Python