jQuery自定义Web页面鼠标右键菜单

浏览数：25 / 时间：2015年06月09日

右键菜单是固定的,很多时候，我们需要自定义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>