手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery 简短右键菜单 多浏览器兼容
jquery 简短右键菜单 多浏览器兼容
摘要:复制代码代码如下:$(function(){document.oncontextmenu=function(){returnfalse;}/...

复制代码 代码如下:

$(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+""><div><ul>";

for(var i=0;i<menuCount;i++){

divMenuList+="<li+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();

}

});

}

});

在线演示 右键点击测试效果

打包下载

【jquery 简短右键菜单 多浏览器兼容】相关文章:

jQuery插件zepto.js简单实现tab切换

如何实现浏览器上的右键菜单

jQuery插件支持同一页面被多次调用

jquery中添加属性和删除属性

Jquery中基本选择器用法实例详解

jquery 构造函数在表单提交过程中修改数据

jquery右下角自动弹出可关闭的广告层

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

jQuery结合ajax实现动态加载文本内容

js实现顶部可折叠的菜单工具栏效果实例

精品推荐
分类导航