from :http://ayi.ck97.com/post/190.html
随着WEB标准化的进程,网站正在逐渐向XHTML过渡,在这个过程中,也慢慢发现了非常多的问题。
原先的泡泡提示组件就已经严重出现错误,经过一次大手术后,现已完全支持XHTML。
新版本实现功能:
1、完美支持XHTML,于IE和FireFox长时间测试正常
2、实现泡泡大小自适应
效果如下:
![点击看大图 点击看大图](http://ayi.ck97.com/upload/200602051036317421.PNG)
调用代码:
<script type="text/javascript" src="Js/PopBubble.js"></script>
<script type="text/javascript">
AddPopBubble('UserName','用户名兼昵称的作用,请仔细填写。用户名只能由a~z的英文字母(不区分大小写)、<br />0~9的数字、减号或下划线,以及中文组成,长度为3~20个字符,只能以数字、字<br />母或者中文开头和结尾。');
AddPopBubble('Password','密码可使用任何英文字母及阿拉伯数字组合,长度为 6-30 个字符,并区分<br />英文字母大小写。');
AddPopBubble('Password1','请再次输入您的账号密码。');
</script>
说明:AddPopBubble函数的第一个参数是绑定的控件ID,后面是泡泡提示的内容。以上代码加在<head>和</head>中间。
---注意:请将JS文件中的图片路径替换成您相应的路径,原路径为:http://reg.mpdaogou.com/ToolsPic
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
var pb_an=new Array();var pb_at=new Array();var pb_c1=document.all;var pb_st=new Array();function AddPopBubble(q,s)
{pb_an[pb_an.length]=q;pb_at[pb_at.length]=s;};function pb_f4()
{for(i in pb_an)
{var e=document.getElementById(pb_an[i]);if(e!=null)
{pb_f6(e,"focus",pb_f5);pb_f6(e,"blur",pb_f2);};};};function pb_f1(r)
{for(i in pb_an)if(pb_an[i]==r)return pb_at[i];};function pb_f6(l,h,k)
{if(pb_c1)
{l.attachEvent("on"+h,k);}else
{l.addEventListener(h,k,true);};};function pb_f5(j)
{var t="srcElement",p="target";var f;j[p]?f=j[p]["id"]:f=j[t]["id"];var b=document.getElementById(f);var o=document.getElementById("bubble");var c=document.getElementById("bubbleContent");c.width="";c.innerHTML=pb_f1(f);if(c.offsetWidth<150)c.width="150px";var offsetLeft=b.offsetLeft+b.offsetWidth-20;var offsetTop=b.offsetTop-c.offsetHeight-32;var a=b.offsetParent;while(a.tagName.toUpperCase()!='BODY')
{offsetLeft+=a.offsetLeft;offsetTop+=a.offsetTop;a=a.offsetParent;};o.style.left=offsetLeft+"px";o.style.top=offsetTop+"px";o.style.visibility="visible";if(pb_c1)pb_f3("SELECT",o);};function pb_f3(ia,n)
{for(i=0;i<document.all.tags(ia).length;i++)
{obj=document.all.tags(ia)[i];if(!obj||!obj.offsetParent)continue;objLeft=obj.offsetLeft;objTop=obj.offsetTop;a=obj.offsetParent;while(a.tagName.toUpperCase()!='BODY'&&a.offsetParent)
{objLeft+=a.offsetLeft;objTop+=a.offsetTop;a=a.offsetParent;};objHeight=obj.offsetHeight;objWidth=obj.offsetWidth;if((n.offsetLeft+n.offsetWidth)<=objLeft);else if((n.offsetTop+n.offsetHeight)<=objTop);else if(n.offsetTop>=(objTop+objHeight));else if(n.offsetLeft>=(objLeft+objWidth));else
{obj.style.visibility='hidden';pb_st[pb_st.length]=obj;};};};function pb_f2()
{document.getElementById("bubble").style.visibility="hidden";for(i in pb_st)pb_st[i].style.visibility="visible";pb_st.length=0;};document.write('<style>.bubble-panel
{position:absolute;top:0;left:0;z-index:3;visibility:hidden;}.bubble-content
{text-align: left;}#bubbleContent
{padding:5px;height:30px;font-size:9pt;background-color:#FFF}</style>');document.write('<div class="bubble-panel" id="bubble"><table border="0" cellpadding="0" cellspacing="0" class="bubble-content"><tr><td><img src="http://reg.mpdaogou.com/ToolsPic/bubble_01.png" width="8" height="7" alt=""></td><td colspan="2" background="http://reg.mpdaogou.com/ToolsPic/bubble_02.png"></td><td><img src="http://reg.mpdaogou.com/ToolsPic/bubble_03.png" width="8" height="7" alt=""></td></tr><tr><td width="8" background="http://reg.mpdaogou.com/ToolsPic/bubble_04.png"></td><td colspan="2" valign="top" id="bubbleContent"></td><td width="8" background="http://reg.mpdaogou.com/ToolsPic/bubble_06.png"></td></tr><tr><td colspan="3" background="http://reg.mpdaogou.com/ToolsPic/bubble_08.png"><img src="http://reg.mpdaogou.com/ToolsPic/bubble_07.png" width="34" height="25" alt=""></td><td><img src="http://reg.mpdaogou.com/ToolsPic/bubble_09.png" width="8" height="25" alt=""></td></tr></table></div>');if(!pb_c1)
{window.addEventListener("load",pb_f4,false);}else
{window.attachEvent("onload",pb_f4);};
![](/Images/OutliningIndicators/None.gif)