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