最近要写一个右键菜单 上百度一看 发现有很多插件,但是因为本人能力有限啊,不会去改插件来满足后台小哥哥的要求,因此,就像算啦,干嘛不自己写,难道真的那么难么?先插入html吧
1 <!--右键--> 2 <div class="menuRight" id="menuRight" style="display: none;"> 3 4 <ul> 5 6 <li id="open"><span> 7 <img src="/Themes/Default/Images/menubao.png"></span><span>报警设置</span></li> 8 9 <li id="email"><span> 10 <img src="/Themes/Default/Images/menushe.png"></span><span>设置</span></li> 11 12 <li id="save"><span> 13 <img src="/Themes/Default/Images/menubian.png"></span><span>编辑</span></li> 14 15 <li id="close"><span> 16 <img src="/Themes/Default/Images/menushan.png"></span><span>删除</span></li> 17 18 </ul> 19 20 </div>
function ss(){ $(".menuRight ul li").hover( function () { $(this).css('backgroundColor','#ccc'); $(this).siblings().css('backgroundColor','#fff'); }, function () { $(this).css('backgroundColor','#fff'); } ); } //某元素组织右键点击事件 $('body').bind("contextmenu", function(){ return false;//屏蔽右键 }) $(".tr").each(function(i){ $(this).mousedown(function(e) { //右键为3 //获取当前tr的任意td //alert($(this).find('td').eq(10).text()) ss(); var menuh=$('.menuRight').height();
var wh=$(window).height();
//定位
if (3 == e.which) {
//超出边界范围
if((menuh+e.pageY )>=wh){
var top=e.pageY-menuh;
$('.menuRight').css({'left':e.pageX+'px','top':top+'px'});
}
else{
$('.menuRight').css({'left':e.pageX+'px','top':e.pageY+'px'});
}
$('.menuRight').show();
} return false; }) }); //任意键关闭 $("body").click(function(){ $('.menuRight').hide(); });