jquery自定义网页列表右键菜单选项

2016-5-6 Jon js+jquery+ajax

jQuery自定义列表右键菜单选项

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>jQuery自定义列表右键菜单选项</title>
      <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;}
        a{text-decoration: none;color: black;}
        a:hover{color: white;background: black;}
        #mymenu{position: absolute;display: none;z-index: 9999;background: yellow;border: 1px solid;width: 200px;}
        #mymenu li{line-height: 22px;}
        #mymenu li a{display: block}
        #textbox{background: #aaa;width:260px;}
        #textbox li{
          line-height: 35px;
          width:100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        #textbox li:hover,#textbox li.active{background: #ddd;color:#000;}
        img{height: 30px;width: 30px;}
      </style>
    </head>
    <body>
      <ul id="mymenu">
        <li><a href="javascript:;">踢人</a></li>
        <li><a href="javascript:;">禁言</a></li>
        <li><a href="javascript:;">查看</a></li>
        <li><a href="javascript:;">编辑</a></li>
        <li><a href="javascript:;">带走</a></li>
      </ul>
      <ul id="textbox">
        <li>1111111111</li>
        <li>222222222222</li>
        <li>3333333333333</li>
        <li>4444444444444</li>
        <li>5555555555555</li>
        <li>66666666666666</li>
        <li>77777777777777</li>
        <li>88888888888888</li>
      </ul>
      <script src="https://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
      <script>
        $(function(){
          var myMenu=$('#mymenu'),
              textBox=$('#textbox'),
              ekey;
          // 点击对应右键菜单功能让其知道操作的是哪个列表选项
          myMenu.on('click','li',function(){
            alert(ekey);
          });
          // 在列表项目上右键
          textBox.on('contextmenu','li',function(e){
            // 记录在那个列表项目上右键的
            ekey=$(this).addClass('active').siblings().removeClass('active').end().index();
            myMenu.show();
            myMenu.css({
              'top':e.pageY+'px',
              'left':e.pageX+'px'
            });
            return false;
          });
          // 点击任意位置让右键菜单消失
          $(document).on('click',function(){
            myMenu.hide();
            textBox.find('li').removeClass('active');
          });
        });
      </script>
    </body>
    </html>

您可以修改框中代码后运行查看

标签: 右键菜单