jquery 简短右键菜单 多浏览器兼容
作者:bea
代码如下: $(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(){
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下动态this与动态绑定实例代码
- jQuery 数据缓存data(name, value)详解及实现
- javascript splice数组简单操作
- 用AJAX返回HTML片段中的JavaScript脚本
- Javascript解决常见浏览器兼容问题的12种方法
- javascript 可控式透明特效实现代码
- javascript 精确获取页面元素的位置
- javascript 精确获取样式属性(下)
- javascript 精确获取样式属性(上)
- javascript 模拟点击广告
- javascript getElementsByClassName 和js取地址栏参数
- javascript addLoadEvent函数说明
- firefox插件Firebug的使用教程
- firefox firebug中文入门教程
- Firefox+FireBug使JQuery的学习更加轻松愉快
- 20个非常棒的Jquery实用工具 国外文章
- JavaScript与DropDownList 区别分析
- HTML node相关的一些资料整理
- JQery 渐变图片导航效果代码 漂亮