javascript 팁 프롬프트 상자 구성 요소 구현 code_javascript 팁

tip.js

코드 복사 코드는 다음과 같습니다.

functiontips(obj,tag){
vartip = document.createElement('div'),arg=args[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;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= "아직 콘텐츠가 없습니다!";
if(leftparseInt(getStyle(tip,'width'))>bodywid) //현재 위치가 최대 너비를 초과하는지 확인
text='right:' (bodywid -left) 'px;left:auto ;';
else
text='left:' (왼쪽 this.offsetWidth) 'px;'
text ='top:' (top this.offsetHeight ) 'px;';
tip.style.cssText=text;
text=''
tip.style.display='block'; 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; //창이 아닌 el 객체를 가리키도록 IE에서 요소 참조를 복사합니다.
el[type fn] = function(){el[' e' type fn](window.event) ;}
el.attachEvent('on' type, el[type fn])
}else
el.addEventListener(type, fn, false);
}
함수 위치( 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.getCompulatedStyle(obj, null)
return $arr[styleName];
}
}
tips(document.getElementById('tips'),'a')


간단한 제목 같은 팁 효과 , 그러나 실제 내용은 매우 풍부할 수 있습니다. 위의 js는tip.js로 저장되며, 다음은 사용된 데모입니다.

코드 복사 코드는 다음과 같습니다.

>

프롬프트 메시지 상자
< ;link rel="stylesheet" type="text/css" href="style/css/tip.css" />



팁 상자

Script House오늘 발표된 IT 기사 "웹 프로그램 실행 효율성 향상을 위한 30가지 좋은 경험"에서 이 30가지 지침은 우리에게 매우 중요합니다. 웹 개발은 알고 있지만 그것이 무엇인지 모르는 경우에 매우 유용합니다Script Home이것이 바로 그 이유입니다. 다음은 이러한 지침에 대한 나의 이해와 분석입니다.

;