zoukankan      html  css  js  c++  java
  • jquery右键菜单

    最近要写一个右键菜单 上百度一看 发现有很多插件,但是因为本人能力有限啊,不会去改插件来满足后台小哥哥的要求,因此,就像算啦,干嘛不自己写,难道真的那么难么?先插入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(); });
  • 相关阅读:
    [公告] 置顶博客一览
    [公告] 关于花
    【题解】[SNOI2019] 纸牌
    [题解向] PAM简单习题
    [题解向] 带悔贪心泛做
    [题解向] Manacher简单习题
    java记录(2)
    java记录(1)
    js垃圾回收的机制
    盒子的计算
  • 原文地址:https://www.cnblogs.com/nf1206/p/6650788.html
Copyright © 2011-2022 走看看