`
derek_z
  • 浏览: 16038 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

右键菜单

 
阅读更多 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery实现右键菜单 - web前端网</title>
<style>
body{padding:0;margin:0;font:normal 12px/25px "\5FAE\8F6F\96C5\9ED1";color:#333;}
ul,li{margin:0;padding:0;}
li{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover{color:#008000;}
#class-list{width:200px;margin:100px;padding:10px;border:1px solid #DDD;border-radius:5px;}
#class-list li{text-indent:10px;margin-bottom:1px;}
#class-list li a{display:block;}
#class-list li a:hover,#class-list li.an a,#menu li a:hover{background:#F4F4F4;color:#008000;}
#menu{width:50px;display:none;position:absolute;top:0;left:0;padding:5px;z-index:100;}
#menu ul{background:#FFF;border-radius:5px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2)}
#menu ul li{line-height:30px;border-bottom:1px solid #F2F2F2;text-align:center;}
#menu ul li a{display:block;}
#menu ul li a:hover{background:#FAFAFA;}
</style>
</head>
<body>
<div id="class-list">
  <ul>
    <li><a href="http://www.web277.com/doc/" target="_blank">前端文档</a></li>
    <li><a href="http://www.web277.com/sj/" target="_blank">前端设计</a></li>
    <li><a href="http://www.web277.com/xc/" target="_blank">xHTML+CSS</a></li>
    <li><a href="http://www.web277.com/hc/" target="_blank">HTML5+CSS3</a></li>
    <li><a href="http://www.web277.com/js/" target="_blank">Javascript</a></li>
    <li><a href="http://www.web277.com/jq/" target="_blank">jQurey</a></li>
  </ul>
</div>
<div id="menu">
        <ul>
            <li><a href="http://www.web277.com" target="_blank">修改</a></li>
        <li><a href="http://www.web277.com" target="_blank">生成</a></li>
        <li><a href="http://www.web277.com" target="_blank">预览</a></li>
    </ul>
</div>
</body>
</html>
<script src='http://static.w3cfuns.com/js/jQuery/library/jquery-1.7.2.min.js?v=20121228'></script>
<script>
$(function(){
        $("#class-list").on("contextmenu","li",function(e){
                if(typeof e.preventDefault === "function"){
                        e.preventDefault();
                        e.stopPropagation();
                }else{
                        e.returnValue = false;
                        e.cancelBubble = true;
                }
                $(this).addClass("an").siblings("li").removeClass("an")
                $("#menu").css({"left":e.clientX,"top":e.clientY}).fadeIn()
        })
        $(document).bind("click",function(e){
                var target  = $(e.target);
                if(target.closest("#class-list").length == 0){
                        $("#menu").hide()
                        $("#class-list li.an").removeClass("an")
                }
        })
})
</script>

 

分享到：
| spring + mybatis 解决n+1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics