泡泡提示加强版 完美支持XHTML(JavaScript)--zhuan

from :http://ayi.ck97.com/post/190.html

随着WEB标准化的进程,网站正在逐渐向XHTML过渡,在这个过程中,也慢慢发现了非常多的问题。
原先的泡泡提示组件就已经严重出现错误,经过一次大手术后,现已完全支持XHTML。

新版本实现功能:
1、完美支持XHTML,于IE和FireFox长时间测试正常
2、实现泡泡大小自适应
效果如下:

调用代码:

<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

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);} ;

你可能感兴趣的:(JavaScript)