jquery 简短右键菜单 例子(多浏览器兼容)
2012-03-22 17:14
399 查看
不解释, 能看明白 就看, 看不明白 就闪。
不解释, 能看明白 就看, 看不明白 就闪。
不解释, 能看明白 就看, 看不明白 就闪。
用到了 Jquery, 具体版本 自己 Download 去 。
从中用到了一张 图片如下:
前台引用:
Over!!!!
$(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(); } }); } });
不解释, 能看明白 就看, 看不明白 就闪。
*{ font-size:12px; margin:0; padding:0;} .div_RightMenu{ position:absolute; list-style:none;width:100px;} .div_RightMenu div{background:#bbb;position:relative;} .div_RightMenu ul{position:relative;background:#fff; border:1px solid #999;left:-2px;top:-2px; margin:0; padding:1px 0;} .div_RightMenu ul li{ list-style:none; margin:0 1px;padding:0;line-height:20px;height:20px;text-indent:25px;background-image:url(images/t.gif); background-repeat:no-repeat;cursor:pointer;border-width:1px;border-style:solid;border-color:#fff;} .div_RightMenu ul li.RMli_1{background-position:0 0;} .div_RightMenu ul li.RMli_2{background-position:0 -20px;} .div_RightMenu ul li.RMli_3{background-position:0 -40px;} .div_RightMenu ul li.RMli_4{background-position:0 -60px;} .div_RightMenu ul li.RMli_5{background-position:0 -80px;} .div_RightMenu ul li.RMli_6{background-position:0 -100px;} .div_RightMenu ul li.RMli_7{background-position:0 -120px;} .div_RightMenu ul li.RMli_8{background-position:0 -140px;} .div_RightMenu ul li.RMli_9{background-position:0 -160px;} .div_RightMenu ul li.RMli_10{background-position:0 -180px;} .div_RightMenu ul li.RMli_11{background-position:0 -200px;} .div_RightMenu ul li.RMli_12{background-position:0 -220px;} .div_RightMenu ul li.RMli_13{background-position:0 -240px;} .div_RightMenu ul li.RMli_14{background-position:0 -260px;} .div_RightMenu ul li.RMli_15{background-position:0 -280px;} .div_RightMenu ul li.RMli_16{background-position:0 -300px;} .div_RightMenu ul li.RM_mouseover{ background-color:#B6BDD2; border-color:#0A246A;} tr.selected{ background:#B6BDD2;}
不解释, 能看明白 就看, 看不明白 就闪。
用到了 Jquery, 具体版本 自己 Download 去 。
从中用到了一张 图片如下:
前台引用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery 简短右键菜单</title> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/xxxxx.js"></script> </head> <body> <div id="divTest">右键菜单显示区域</div> <hr color="red" width="100%" size="30"> <table class="slist" width="100%" border="1" cellpadding="0" cellspacing="0"> <tr id="T_1"><td>1</td></tr> <tr id="T_2"><td>2</td></tr> <tr id="T_3"><td>3</td></tr> <tr id="T_4"><td>4</td></tr> </table> <script type="text/javascript"> $("#divTest,.slist tr").RightMenu('myMenu2',{ menuList:[{menuName:"菜单1",menuclass:"1",clickEvent:"divClick(1)"}, {menuName:"菜单2",menuclass:"2",clickEvent:"divClick(2)"}, {menuName:"菜单3",menuclass:"3",clickEvent: "divClick(3)"}, {menuName:"菜单4",menuclass:"4",clickEvent: "divClick(4)"}, {menuName:"菜单5",menuclass:"5",clickEvent: "divClick(5)"}, {menuName:"菜单6",menuclass:"6",clickEvent: "divClick(6)"}, {menuName:"菜单7",menuclass:"7",clickEvent: "divClick(7)"}, {menuName:"菜单8",menuclass:"8",clickEvent: "divClick(8)"}, {menuName:"菜单9",menuclass:"9",clickEvent: "divClick(9)"}, {menuName:"菜单10",menuclass:"10",clickEvent: "divClick(10)"}, {menuName:"菜单11",menuclass:"11",clickEvent: "divClick(11)"}, {menuName:"菜单12",menuclass:"12",clickEvent: "divClick(12)"}, {menuName:"菜单13",menuclass:"13",clickEvent: "divClick(13)"}, {menuName:"菜单14",menuclass:"14",clickEvent: "divClick(14)"}, {menuName:"菜单15",menuclass:"15",clickEvent: "divClick(15)"}, {menuName:"菜单16",menuclass:"16",clickEvent: "divClick(16)"}, {menuName:"菜单17",menuclass:"17",clickEvent: "divClick(17)"}] }); function divClick(s){ switch(s){ case 1:alert(1);break; case 2:confirm("确定?");break; default:alert(s);break; } } </script> </body> </html>
Over!!!!
相关文章推荐
- jquery 简短右键菜单 多浏览器兼容
- jquery 简短 右键菜单 兼容ie6 ie7 ie8 firefox chrome
- jquery 简短 右键菜单 兼容ie6 ie7 ie8 firefox chrome
- javascript 实现各浏览器兼容的右键菜单
- jquery禁用右键菜单及事件兼容处理函数说明
- 网页防复制,禁止文字选中,禁止右键菜单js代码,兼容大部分浏览器方法
- 一个jquery实现右键菜单,兼容FF
- 屏蔽浏览器右键菜单功能,自定义右键菜单(兼容IE8)
- 深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
- JSP----jQuery插件ContextMenu生成右键菜单
- jquery的不同写法可能造成浏览器的不兼容问题!
- jQuery简单实现禁用右键菜单
- jQuery禁止右键菜单,全选
- jquery select动态加载选择(兼容各种浏览器)
- jquery select动态加载选择(兼容各种浏览器)
- swt tray demo:右键菜单,单击隐藏,所有事件的例子
- jquery - 菜单插件(右键菜单,左键菜单)
- Jquery 右键菜单
- 为jQuery.Treeview添加右键菜单的实现代码