/*! * Phoenix.FloatMenu * 功能说明:常用的浮动菜单 * 作者:李金安 * 版本:1.0 * 用法:见index.html * 备注:使用前,请先引用jquery.js */ (function($){ $.fn.FloatMenu=function(opts){ var defaults = { direction: "bottom", // 菜单弹出方向 bottom,top,left,right align:"middle", // 对齐方式 middle,top,bottom,left,right offsetTop: 0, //顶部偏移量 offsetLeft:0 //左边偏移量 } var ps = $.extend({},defaults, opts); var contains=function(wrap,child){ if("\v" == "v") return wrap.contains(child); while(child && typeof(child.parentNode) != "undefind"){ if(wrap == child) return true; child = child.parentNode; } } return this.each(function(){ var me = this; var menu=$(me).attr("rel"); if(document.getElementById(menu)) { var pid=$(me).attr("pid"); if(!pid){ var ml=menu.split("_"); if(ml.length>1){pid=ml[ml.length-2];} } //设置菜单列表的mouseover,mouseout效果 $("#"+menu).data("parentID",pid); //保留父级id $("#"+menu).bind('mouseover',function(){ $(this).show(); var parentID=$(this).data("parentID"); if(!parentID){return;} var parent=null; while(parent=document.getElementById(parentID)) { parent.style.display='block'; var parentID=$(parent).data("parentID"); } }); $("#"+menu).bind('mouseout',function(e){ var e = e||window.event; var tar = e.relatedTarget || e.toElement; var target=$("#"+menu); if(!contains(target[0], tar)) { target.hide(); var parentID=$(this).data("parentID"); if(!parentID){return;} var parent=null; while(parent=document.getElementById(parentID)) { parent.style.display='none'; var parentID=$(parent).data("parentID"); } } }); //绑定鼠标移上去的效果 $(me).bind('mouseover',{e:me},function(s){ var target = $(s.data.e);//操作的当前对象 var mID=target.attr("rel"); var menu=document.getElementById(mID); if(menu) { var jMenu=$(menu); var top=target.offset().top; //当前目标的top坐标 var left=target.offset().left; //当前目标的left坐标 var tWidth=parseInt(target.width()); // 当前目标的宽度 var tHeight=parseInt(target.height()); //当前目标的高度 var mWidth=parseInt(jMenu.width()); //菜单的宽度 var mHeight=parseInt(jMenu.height()); //菜单的高度 switch(ps.direction) { case "bottom": switch(ps.align) { case "middle":left-=(mWidth-tWidth)/2; break; case "left":left-=mWidth; break; case "right":left+=tWidth; break; } top+=tHeight; break; case "top": switch(ps.align) { case "middle":left-=(mWidth-tWidth)/2; break; case "left":left-=mWidth; break; case "right":left+=tWidth; break; } top-=mHeight; break; case "left": switch(ps.align) { case "middle":top-=(mHeight-tHeight)/2; break; case "bottom":top-=mHeight; break; case "top":top+=tHeight; break; } left-=mWidth; break; case "right": switch(ps.align) { case "middle":top-=(mHeight-tHeight)/2; break; case "bottom":top-=mHeight; break; case "top":top+=tHeight; break; } left+=tWidth; break; } top+=ps.offsetTop; left+=ps.offsetLeft; $("#"+mID).css({"left":left+"px","top":top+"px"}).show(); } }); //绑定鼠标移开的效果 $(me).bind('mouseout',{e:me},function(event){ var target = $(event.data.e);//操作的当前对象 var mID=target.attr("rel"); $("#"+mID).hide(); }); } }); }; })(jQuery);