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

2016-5-6 Jon

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

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

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

评论：

haoessays

2018-03-25 22:14 回复

那么这篇文章太多了，因为它与不同的功能有关。现在，一个拥有大量关于互联网和计算机信息的人成功了。你的博客给了我最好的想法，所以我想在高层次上进行推广。

发表评论：