tips提示框组件

代码

function tips(obj,tag){
var tip = document.createElement( ' div ' ),arg = arguments[ 2 ],left,top; // 创建tipbox
var bodywid = document.documentElement.clientWidth; // 这里也可以替换为容器的宽度$(id).outerWidth();
var abs = obj.getElementsByTagName(tag);
tip.className = " tip_bd " ;
obj.appendChild(tip);
for ( var i = 0 ,len = abs.length;i < len;i ++ ){
hover(abs[i], function (){
var content = arg || this .getAttribute( ' tip ' ),text;
left = position( this ).left,top = position( this ).top;
content ? tip.innerHTML = content:tip.innerHTML = " 暂无内容！ " ;
if (left + parseInt(getStyle(tip, ' width ' )) > bodywid) // 判断当前位置是否超过最大宽度
text = ' right: ' + (bodywid - left) + ' px;left:auto; ' ;
else
text = ' left: ' + (left + this .offsetWidth) + ' px; ' ;
text += ' top: ' + (top + this .offsetHeight) + ' px; ' ;
tip.style.cssText = text;
text = '' ;
tip.style.display = ' block ' ;
}, function (){
tip.style.display = ' none ' ;
});
}
}
function hover(el,fnOver, fnOut){ // 鼠标滑过函数
addEvent(el, ' mouseover ' ,fnOver);
addEvent(el, ' mouseout ' ,fnOut);
}
function addEvent(el,type,fn){ // 绑定事件
if (el.attachEvent) {
el[ ' e ' + type + fn] = fn; // IE下拷贝元素引用,使this指向el对象而不是window
el[type + fn] = function (){el[ ' e ' + type + fn](window.event);}
el.attachEvent( ' on ' + type, el[type + fn]);
} else
el.addEventListener(type, fn, false );
}
function position(el){ // dom节点的绝对位置
if (el && el.nodeType == 1 )
return { ' left ' :el.getBoundingClientRect().left + document.documentElement.scrollLeft, ' top ' :el.getBoundingClientRect().top + document.documentElement.scrollTop};
}
function getStyle(obj,styleName){ // 获取当前样式属性
if (obj.currentStyle) // ie
return obj.currentStyle[styleName];
else { // ff
var $arr = obj.ownerDocument.defaultView.getComputedStyle(obj, null );
return $arr[styleName];
}
}
tips(document.getElementById( ' tips ' ), ' a ' );

一个简单的类似title的提示效果，实现的内容可以很丰富，以上js另存为tip.js，下面是使用的demo。

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< meta http-equiv ="X-UA-Compatible" content ="IE=EmulateIE7" />
< meta name ="copyright" content ="" />
< meta name ="keywords" content ="" />
< meta name ="description" content ="" />
< title > 提示信息框 </ title >
< link rel ="stylesheet" type ="text/css" href ="style/css/tip.css" />
< style >
#wrap { line-height : 22px ; padding : 20px ; }
#tips .tip_bd { border : 1px solid green ; width : 100px ; position : absolute ; background : #fff ; z-index : 9999 ; text-align : center ; display : none ; }
#tips { border : 1px solid #ccc ; padding : 0 10px ; }
</ style >
</ head >

< body >
< h1 > 提示信息框 </ h1 >
< br />< br />< br />< br />
< div id ="tips" >
阅读了 < a href ="#" tip ="博客园1" > 博客园 </ a > 今天发布的IT文章《30个提高Web程序执行效率的好经验》，这30条准则对我们web开发是非常有用的，不则是知其然而不知其所 < a href ="#" tip ="博客园2" > 博客园 </ a > 以然。下面是我对这些准则的理解和分析，有些有关JS性能的准则，我也测试了它们 < a href ="#" > 博客园 </ a > 的差异，大家可以下载DEMO页面，如有理解不正确的地方，请大家指教。
</ div >
</ body >
< script type ="text/javascript" src ="tips.js" ></ script >
</ html >

其中在ie下经历过一个bug：往p这样的内联元素中插入如div这样的块级元素并使用innerHTML赋值便会报“未知运行错误”。而其他浏览器会自动校正或隐藏这个html结构上的错误，如果给table使用innerHTML赋值tr也会报相同的错误。当时花了很多时间去琢磨是否是js的写法问题，花了很长时间才找出原来是html结构上面的问题导致这样的bug。后来又在JavaScript高级程序设计第二版这本书里找到一篇文章专门介绍了ie下独有的bug，有兴趣的朋友可以去找这本书看看。

转载于:https://www.cnblogs.com/foot3188/archive/2010/11/19/1882091.html