学步园

其实本不应该是一个插件的,主要是为了在鼠标点击处弹出个层,不过找了好多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>