javascript tips prompt box component implementation code_javascript tips

WBOY

Release： 2016-05-16 18:15:59

Original

1333 people have browsed it

tip.js

Copy code The code is as follows:

 
function tips( obj,tag){ 
var tip = document.createElement('div'),arg= arguments[2],left,top; //Create tipbox 
var bodywid= document.documentElement.clientWidth; //Here It can also be replaced by the width of the container $(id).outerWidth(); 
var abs = obj.getElementsByTagName(tag); 
tip.className="tip_bd"; 
obj.appendChild(tip); 
for(var i=0,len=abs.length;ihover(abs[i],function(){ 
var content = arg||this.getAttribute( 'tip'),text; 
left = position(this).left,top=position(this).top; 
content?tip.innerHTML=content:tip.innerHTML="No content yet!"; 
if(left parseInt(getStyle(tip,'width'))>bodywid) //Determine whether the current position exceeds the maximum width
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){//Mouse over function
addEvent(el,'mouseover',fnOver); 
addEvent(el,'mouseout',fnOut); 
} 
function addEvent(el,type,fn){ //Bind event
if(el.attachEvent) { 
el[' e' type fn] = fn; //Copy the element reference under IE so that this points to the el object instead of 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){//The absolute position of the dom node
if(el&&el.nodeType == 1) 
return {'left':el.getBoundingClientRect().left document.documentElement.scrollLeft,'top':el. getBoundingClientRect().top document.documentElement.scrollTop}; 
} 
function getStyle(obj,styleName){//Get the current style attribute
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'); 

A simple title-like tip effect, but the actual content can be very rich. The above js is saved as tip.js, the following is the demo used.

Copy code The code is as follows:

< meta name="keywords" content="" />

Prompt message box
< ;link rel="stylesheet" type="text/css" href="style/css/tip.css" />

Tips box

Read Script HouseThe IT article "30 Good Experiences for Improving Web Program Execution Efficiency" published today, these 30 guidelines are very important to us Web development is very useful, if you know it but don't know what it isScript HomeThat's why. The following is my understanding and analysis of these guidelines. Some guidelines related to JS performance. I also tested their differences in . you can download the demo page. if there is anything i don understand correctly please let me know.>