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效率 一次判断,而不要次次判断
Mar 30 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 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实现的常见排序算法汇总
2014/09/08 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
js CSS操作方法集合
2008/10/31 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python MD5加密实例详解
2017/08/02 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
python实现低通滤波器代码
2020/02/26 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
优秀员工自荐信范文
2013/10/05 职场文书
网络技术专业求职信
2014/02/18 职场文书
2014政务公开实施方案
2014/02/19 职场文书
请假条格式范文
2014/04/10 职场文书
单位接收证明格式
2015/06/18 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
python中redis包操作数据库的教程
2022/04/19 Python