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

转载于:https://www.cnblogs.com/Nina-piaoye/archive/2006/12/15/593323.html

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

  1. javascript 方法 一直提示 对象不支持此属性或方法

    今天在做那个登录功能时,登录运行到login()方法时IE老是提示"对象不支持此属性或方法".... 网上查资料得知:javaScript的方法名中不能与页面上的标签名相同.... ...

  2. PHP生成PDF完美支持中文,解决TCPDF乱码

    PHP生成PDF完美支持中文,解决TCPDF乱码 2011-09-26 09:04 418人阅读 评论(0) 收藏 举报 phpfontsheaderttfxhtml文档 PHP生成PDF完美支持中文 ...

  3. js日历控件,值得收藏,完美支持自定义

    My97日期控件 一个非常好用的日期控件,功能非常优秀,绝对是你一直想要的日期控件. 演示地址: http://www.my97.net/dp/demo/ 下载1: http://www.cnblog ...

  4. Towxml 3.0来了,让小程序完美支持Markdown

    Towxml 3.0来了,让小程序完美支持Markdown 查看全文 http://www.taodudu.cc/news/show-805307.html 相关文章: 数据接口的登录态校验以及JWT ...

  5. 戴尔7040linux改装win7,戴尔OptiPlex 3060台式机win10改win7系统(完美支持usb)

    [文章导读]戴尔OptiPlex 3060是一款商用台式机,该机型采用Intel 酷睿i3 8100 第八代处理器.默认预装了win10系统,最近有很多网友改了win7后发现进不了系统,由于默认戴尔O ...

  6. VIVO Xplay_2.13.2 目前最新ViVo官方固件,完美root,降噪点,完美支持官方OTA升级,稳定,流畅,实用ROM

    ROM版本 VIVO-Xplay-PD2.13.2 ROM作者 大盛 http://weibo.com/DaShengdd Android版本 Android4.2.2 创建日期 2013.07.31 ...

  7. 【原】S1普版加强版 完美仿钻石ROM

    看到网上有很多刷机有风险,我购买了多普达 S1(行货--WM 6.0) 一直不敢刷机,但是看到身边的同事个个都刷的很酷很过瘾,就这样,不知不觉就下水了. 到网上一搜,乖乖,很多S1的ROM(WM6.1 ...

  8. 解决Macbook M1芯片安装Sketch打不开问题?M1芯片运行哪个版本Sketch?完美支持M1芯片

    Sketch上了最新的72.1版本,你更新了吗? 为了配合big sur系统的UI重新制作了一套全新的UI,不得不承认sketch这方面的反应真是快啊,全新的sketch图标完美适配bigsur的风格 ...

  9. 最强PSP视频输出软件RemoteJoy4iRS (完美支持3.52/3.71 M33)

    使用方法:----------------------------------------------------------------------------------------------- ...

最新文章

  1. extjs 中iframe内存泄漏的问题
  2. php和python哪个学起来简单一点-Php和python php和python哪个容易学
  3. Treelabeling 异或性质,位运算,染色法,二分图(2100)
  4. 要找到现阶段最适合自己的方法
  5. visual tree view在工具箱力没有_Visual-Inertial Odometry
  6. python杂记-RSA加解密实现(2)
  7. Redis 命令--Redis有序集合(sorted set)
  8. 趁爸妈不在家约男朋友回家吃饭,然而......
  9. Spark 性能相关参数配置详解-shuffle篇
  10. 《密码编码学与网络安全》和《现代密码学》PDF
  11. Swift桥接OC,手动创建Objective-OC Bridging Header
  12. Linux临时目录/tmp与/var/tmp
  13. storyboard(故事版)新手教程 图文详解 4.把约束拉成属性 在代码文件里进行修改
  14. mac访问windows中共享的磁盘
  15. 《流浪地球》影评数据爬取分析
  16. 【理论知识学习32】归纳偏差与选择性偏差(概念作用以及举例说明)
  17. MATLAB工具箱,应用程序,软件和资源的精选清单
  18. 在职场要避免这些“潜规则”
  19. HTML 中 a:link ...什么意思
  20. Java项目:jsp房地产客户关系管理系统

热门文章

  1. nginx出现 500 Internal Server Error的解决办法
  2. 【转】如何修改IIS的默认端口号
  3. 配置备份DHCP服务器(LINUX)
  4. gpio库_斗牛犬:出奇的快速GPIO库
  5. get set方法简化_简化开放科学的4种方法
  6. 微信小程序网络通信(一)
  7. Bootstrap导航条中组件的排列
  8. Bootstrap 图片的形状
  9. pillow是python的图像处理标准库_详解Python图像处理库Pillow常用使用方法
  10. PX4代码解析(2)