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 相关文章推荐
非常实用的12个jquery代码片段
Nov 02 Javascript
javascript html5实现表单验证
Mar 01 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
使用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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python实现按任意键继续执行程序
2016/12/30 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
python算的上脚本语言吗
2020/06/22 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
业务总经理岗位职责
2014/02/03 职场文书
元宵晚会主持词
2014/03/25 职场文书
篮球比赛口号
2014/06/10 职场文书
聘任通知书
2015/09/21 职场文书
《小小的船》教学反思
2016/02/18 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL