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静态的url如何传递
May 03 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JS打印组合功能
Aug 04 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python变量命名的7条建议
2019/07/04 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
历史学专业推荐信
2013/11/06 职场文书
大学信息公开实施方案
2014/03/09 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
秋季运动会开幕词
2015/01/28 职场文书
办公用品质量保证书
2015/05/11 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
教你一步步实现一个简易promise
2021/11/02 Javascript
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL