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 相关文章推荐
script不刷新页面的联动前后代码
Sep 18 Javascript
jQuery选择器全面总结
Jan 06 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
vuejs指令详解
Feb 07 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
微信小程序image图片加载完成监听
Aug 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
4.与数据库的连接
2006/10/09 PHP
PHP date函数参数详解
2006/11/27 PHP
PHP一些有意思的小区别
2006/12/06 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
python多线程分块读取文件
2019/08/29 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
python 异步async库的使用说明
2020/05/04 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
python spilt()分隔字符串的实现示例
2021/05/21 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android