作家
登录

jquery 简短右键菜单 多浏览器兼容

作者: 来源:www.28hudong.com 2013-03-30 01:58:32 阅读 我要评论

复制代码 代码如下:$(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(); } }); } });在线演示 右键点击测试效果打包下载

  推荐阅读

  EXT中xtype的含义分析

序言 根据我在论坛上的观察,xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。 定义 xtype就是一个代表类(Class)的标识名字。 譬如,你有这个>>>详细阅读


本文标题:jquery 简短右键菜单 多浏览器兼容

地址:http://www.17bianji.com/kaifa2/JS/27310.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)