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(); });
  • 相关阅读:
    好记性不如烂笔头-linux学习笔记2kickstart自动化安装和cacti
    好记性不如烂笔头-linux学习笔记1
    关于TP5中的依赖注入和容器和facade
    vbs 脚本2
    vbs脚本
    Memcache 和 Radis 比较
    MongoDB 索引的使用, 管理 和优化
    mysql大数据高并发处理
    sql处理高并发
    LB 负载均衡的层次结构
  • 原文地址:https://www.cnblogs.com/nf1206/p/6650788.html
Copyright © 2011-2022 走看看