jquery实现鼠标右击出现菜单

最新推荐文章于 2024-07-30 03:29:40 发布

hwsdau

最新推荐文章于 2024-07-30 03:29:40 发布

阅读量9.1k

点赞数 1

分类专栏： jq 文章标签：右击显示菜单菜单

本文链接：https://blog.csdn.net/hwsdau/article/details/53132862

版权

jq 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

页面如图所示:

css样式:

body{ position:relative;}
ul,li{ margin:0; padding:0; list-style:none; font-size:12px;}
.popup_menu{position:absolute; z-index:90; border:1px solid #AEAEAE; padding:2px; width:80px;border-radius:5px;}
.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:5px;}

jquery代码:

<script type="text/javascript">
var kyoPopupMenu={};
	kyoPopupMenu = (function(){
    return {
        sys: function (obj) {
			$('.popup_menu').remove();
            popupMenuApp = $('<div class="popup_menu app-menu"><ul><li><a menu="menu1">添加成员</a></li><li><a menu="menu2">删除角色</a></li><li><a menu="menu3">新浪</a></li></ul></div>')
			.find('a').attr('href','javascript:;')
			.end().appendTo('body');
			//绑定事件
			$('.app-menu a[menu="menu1"]').on('click', function (){
				window.location.href="http://www.17sucai.com";
            });
			$('.app-menu a[menu="menu2"]').on('click', function (){
				window.location.href="http://www.baidu.com";
            });
			$('.app-menu a[menu="menu3"]').on('click', function (){
				 window.location.href="http://www.sina.com.cn";
            });
			return popupMenuApp;
		}
	}})();
	//取消右键
	$('html').on('contextmenu', function (){return false;}).click(function(){
		$('.popup_menu').hide();
	});
	//桌面点击右击
    $('html').on('contextmenu',function (e){
    	var popupmenu = kyoPopupMenu.sys();
      	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>

这样就可以实现啦;-)