第一次写JQuery插件--用于显示子菜单

其实本不应该是一个插件的,主要是为了在鼠标点击处弹出个层,不过找了好多demo都不能正常运行,直到找到这个鼠标右键菜单的demo.

于是稍加修改,就成了现在这个样子.

要能使用,限制有点多,其实也可以根据代码修改,首先是parentDB必须有id,其次在parentDB里必须放隐藏的菜单,subDB.

主要是满足自己项目的需求,做了个demo,效果还不错,凑合着用吧~~留存一下,以后写Jquery插件也就有参考了.

<script src="jquery-1.8.0.js" type="text/javascript"></script> 
 
<script type="text/javascript">
    $(document).ready(function () {
 
        $(".parentDB").each(function(index, element) {
            $(this).SubMenu();
        });
 
    });
</script>
<style>
ul, li{
    list-style:none;
    }
    .dblist
    {
        position:relative;
        z-index:1;
        width:450px;
    }
.parentDB
{
    width:150px;
    height:32px;
    line-height:32px;
    position:fixed;
    text-align:center;
    cursor:default;
    z-index:1;
    float:left;
}
.subDB
{
    display:none;
}
.TempSubDBDiv
{
        position:absolute;
    left:150px;
    top:0px;
    width:150px;
    text-align:left;
    cursor:default;
    background-color:#fff;
    border:1px solid #ccc;
    padding:8px;
    z-index:3;
    }
 
</style>
 
 
 
<table class="dblist">
<tr>
<td class="parentDB" id="1"><a>国研网</a>
    <div class="subDB">  
    <div class="sub">国研网-经济版1</div>
    <div class="sub">国研网-全能版1</div>
    <div class="sub">国研网-财经版1</div>
    </div>
</td>
<td class="parentDB"  id="21"><a>国研网</a>
    <div class="subDB">
    <div class="sub">国研网-经济版2</div>
    <div class="sub">国研网-全能版2</div>
    <div class="sub">国研网-财经版2</div>
    </div>
</td>
<td class="parentDB"  id="13"><a>国研网</a>
    <div class="subDB">
    <div class="sub">国研网-经济版3</div>
    <div class="sub">国研网-全能版3</div>
    <div class="sub">国研网-财经版31</div>
    </div>
</td>
 
</tr>
<tr>
<td class="parentDB"  id="31"><a>国研网</a>
    <div class="subDB">  
    <div class="sub">国研网-经济版41</div>
    <div class="sub">国研网-全能版41</div>
    <div class="sub">国研网-财经版41</div>
    </div>
</td>
<td class="parentDB"  id="122"><a>国研网</a>
    <div class="subDB">
    <div class="sub">国研网-经济版51</div>
    <div class="sub">国研网-全能版51</div>
    <div class="sub">国研网-财经版51</div>
    </div>
</td>
<td class="parentDB"  id="321"><a>国研网</a>
    <div class="subDB">
    <div class="sub">国研网-经济版71</div>
    <div class="sub">国研网-全能版71</div>
    <div class="sub">国研网-财经版71</div>
    </div>
</td>
 
</tr>
</table>
 
 
<script>
 
$(function(){
  document.onmousemove=mouseMove;//记录鼠标位置
});
var mx=0,my=0;
function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;} 
function mouseCoords(ev){
  if(ev.pageX||ev.pageY){return{x:ev.pageX,y:ev.pageY};}
  return{x:ev.clientX,y:ev.clientY+$(document).scrollTop()};
}
 
$.fn.extend({SubMenu: function(){
      var id = "TempSubDBDiv_"+$(this).attr("id");
      alert(id);
      if (!$("#"+id)[0]){
          parentDB = $(this);
          var TempSubDBDivhtml = "<div id='"+id+"' class='TempSubDBDiv'>"+ parentDB.children(".subDB").html()+"</div>";
          $("body").append(TempSubDBDivhtml).find("#" + id).hide();
            $(".sub").hover(function(){$(this).addClass("on"); },function(){ $(this).removeClass("on");});
      }
      return this.each(function(){
        $(this).click(function(){
        var mw=$('body').width(),mhh=$('html').height(),mbh=$('body').height(),
        w=$('#'+id).width(),h=$('#'+id).height(),
        mh=(mhh>mbh)?mhh:mbh;//最大高度 比较html与body的高度
        if(mh<h+my){my=mh-h;}//超 高
        if(mw<w+mx){mx=mw-w;}//超 宽
        $(".TempSubDBDiv").hide();
        $("#"+id).hide().css({top:my,left:mx}).show();
        });
      });
    }
});
 
</script>