jquery实现鼠标右击出现菜单

来源：互联网发布：中国联通通信网络维护编辑：程序博客网时间：2024/06/05 17:15

页面如图所示:

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>

这样就可以实现啦;-)

0 0