标签：
jQuery自定义Web页面鼠标右键菜单
右键菜单是固定的,很多时候，我们需要自定义web页面自定义菜单，指定相应的功能。
自定义的原理是：jQuery封装了鼠标右键的点击事件（“contextmenu”），首先屏蔽浏览器原始的点击事件，接着，写自己的需要的显示的右键菜单最后，就是什么时候隐藏显示出的右键菜单了。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <title>jQuery制作Web页面鼠标右键美化菜单</title> <style type="text/css"> body{ position:relative;} ul,li{ margin:0; padding:0; list-style:none; font-size:12px;} .split{border-bottom: 1px solid gray;} .popup_menu{position:absolute; z-index:90; border:1px solid #AEAEAE; padding:2px; width:120px;border-radius: 2px;} .popup_menu a{ display:block; color:#325B8E; text-indent:12px; text-decoration:none; height:26px; line-height:25px; padding-right:5px;} .popup_menu a:hover{ background:#57B4E4; color:#fff; border-radius: 2px;} </style> </head> <body> <script type="text/javascript"> var kyPopupMenu={}; kyPopupMenu = (function(){ return { right: function (obj) { $(‘.popup_menu‘).remove(); var menu = ‘<div class="popup_menu app-menu"><ul><li><a url="http://www.cnblogs.com/mini-firework/">firework</a></li><li class="split"></li><li><a url="http://blog.csdn.net/e_real">疯狂的土豆专栏</a></li><li><a url="http://blog.163.com/qiuyg_yc_it/">网易博客</a></li></ul></div>‘; popupMenuApp = $(menu) .find(‘a‘).attr(‘href‘,‘javascript:;‘) .end().appendTo(‘body‘); //绑定事件 $(‘.app-menu a‘).on(‘click‘, function (){ window.location.href=$(this).attr("url"); }); return popupMenuApp; } }; })(); //取消右键 $(‘html‘).on(‘contextmenu‘, function (){return false;}).click(function(){ $(‘.popup_menu‘).hide(); }); //桌面点击右击 $(‘html‘).on(‘contextmenu‘,function (e){ var popupmenu = kyPopupMenu.right(); l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX; t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY; popupmenu.css({left: l,top: t}).show(); return false; }); </script> </body> </html>
效果展示：
标签：
原文地址：http://www.cnblogs.com/mini-firework/p/4410374.html
