/images/white/buttonHelp.gif){kind=small}
/images/white/iconAllTags.gif){kind=small}
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
var isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
//터지여부
hasTouch = 'ontouchstart' in window && !isTouchPad,
//이벤트 종류
RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
START_EV = hasTouch ? 'touchstart' : 'mousedown',
MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
END_EV = hasTouch ? 'touchend' : 'mouseup';
//필수 : 이벤트값
getEvent = function(event){
return event || window.event;
//var target = event.target || event.srcElement; //타겟
},
//필수 : 이벤트 전파 중지관련
/*
* 캡쳐단계(capture phase) : 이벤트가 발생 대상까지 전달되는 단계(아래로)
* - 설명1 : 이벤트가 다른 이벤트로 전파되기 전에 폼 전송과 같은 이벤트를 취소
* - 설명2 : 처리를 완료하기 전에 이벤트(기본 또는 다른이벤트)를 취고하고 싶을 때
* 대상단계(target phase) : 이벤트가 발생 대상에 도달한 단계
* 버블링단계(bubbling phase) : 발생 대상에서 document까지 전달되는 단계(위로)
* - 설명1 : 내부에 다른 요소를 포함한 어떤 요소(<div><div></div></div>)가 있습니다. 두요소 모두 클릭 이벤트를 캡쳐합니다. 안쪽요소에서 발생한 클릭 이벤트가 바깥쪽 요소로 전파되는 것을 막음
* - 설명2 : 이벤트를 취소하고 싶지는 않지만 저저파하는 것을 막을 때
*/
setStopCapture = function(event){
if(event.preventDefault){
event.preventDefault();
}else {
event.returnValue = false;
}
},
setStopBubbling = function(event){
if(event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble = true;
}
},
//UI : 사이즈 함수
size = {
//return data
data : {
winW : null, //윈도우 Width
winH : null, //윈도우 Height
docW : null, //도큐먼트 Width
docH : null, //도큐먼트 Height
scrollL : null, //스크롤 왼쪽(Left)
scrollT : null, //스크롤 상단(Top)
left : null, //div 창 가운데(왼쪽기준) 위치
top : null, //div 창 가운데(상단기준) 위치
divW : null, //div Width 값
divH : null //div Height 값
},
//윈도우 사이즈(브라우저 크기)
getWindow : function(){
var that = this,
M = Math;
that['data']['winW'] = M.round($(window).innerWidth());
that['data']['winH'] = M.round($(window).innerHeight());
return [that['data']['winW'], that['data']['winH']];
},
//도큐먼트 사이즈(document 크기)
getDocument : function(){
var that = this,
M = Math;
that['data']['docW'] = M.round($('body').innerWidth()); //$(document)로 할경우 IE에서 스크롤 발생
that['data']['docH'] = M.round($('body').innerHeight());
return [that['data']['docW'], that['data']['docH']];
},
//스크롤값
getScroll : function(){
var that = this,
M = Math;
that['data']['scrollL'] = M.round($(document).scrollLeft());
that['data']['scrollT'] = M.round($(document).scrollTop());
return [that['data']['scrollL'], that['data']['scrollT']];
},
//특정 DIV 사이즈 및 창 가운데 위치값
getElement : function(obj){
var that = this,
M = Math;
//object 검사
if(!obj || typeof obj != 'object') {
setLog('size object');
return;
}
//도큐먼트
that.getDocument();
//윈도우
that.getWindow();
//스크롤
that.getScroll();
//element
that['data']['divW'] = M.round($(obj).outerWidth(true));
that['data']['divH'] = M.round($(obj).outerHeight(true));
//계산
if(that['data']['winW'] > that['data']['divW']) that['data']['left'] = M.round(that['data']['winW'] / 2) - M.round(that['data']['divW'] / 2);
else that['data']['left'] = 0; //윈도우 사이즈(가로)보다 DIV 사이즈가 더 클경우
if(that['data']['winH'] > that['data']['divH']) that['data']['top'] = M.round(that['data']['winH'] / 2) - M.round(that['data']['divH'] / 2);
else that['data']['top'] = 0; //윈도우 사이즈(세로)보다 DIV 사이즈가 더 클경우
//스크롤값 추가
that['data']['left'] += that['data']['scrollL'];
that['data']['top'] += that['data']['scrollT'];
//top값 + DIV높이 > 윈도우 전체 높이보다 클경우(div가 페이지보다 더 아래로 내려가지 않도록함.)
var tmpTop = M.round(that['data']['top']+that['data']['divH']);
if(tmpTop > that['data']['docH']) {
that['data']['top'] = that['data']['top'] - M.round(tmpTop-that['data']['docH']);
}
//위치값이 0보다 작지않도록 제어
if(that['data']['left'] < 0) that['data']['left'] = 0;
if(that['data']['top'] < 0) that['data']['top'] = 0;
return that['data'];
}
},
//필수 : 윈도우 사이즈
getWindowSize = function(){
var width = 0, height = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
width = window.innerWidth;
height = window.innerHeight;
}else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return {w: width, h: height};
},
//필수 : 스크롤값
getScrollSize = function() {
var scrollX = 0, scrollY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrollY = window.pageYOffset;
scrollX = window.pageXOffset;
}else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrollY = document.body.scrollTop;
scrollX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrollY = document.documentElement.scrollTop;
scrollX = document.documentElement.scrollLeft;
}
return {x: scrollX, y: scrollY};
},
//필수 : 마우스 X, Y 좌표값
getMouseXY = function(event) {
var mouseX = 0, mouseY = 0;
//모바일 확인
if(hasTouch){
event = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
}
mouseX = event.clientX,
mouseY = event.clientY;
mouseX += $(document).scrollLeft(); //추후 크로스브라우저 문제발생시 getScrollSize() 함수호출하여 사용하자.
mouseY += $(document).scrollTop();
return {x: mouseX, y: mouseY};
},
//필수 : 요소(element) 위치 출력
getXY = function(el) {
//el은 문서에 포함되어 있어야 하고, 화면에 보여야 한다.
if(el.parentNode === null || el.style.display == 'none') {
return false;
}
var parent = null,
pos = [], //pos[0]에 x 좌표, pos[1]에 y 좌표 값 저장
box;
if(document.getBoxObjectFor) { //gecko 엔진 기반
box = document.getBoxObjectFor(el); //파이어폭스 등 gecko 엔진 기반에서 x, y좌표 구하기
pos = [box.x, box.y];
}else { //기타 브라우저
//offsetLeft와 offsetTop을 최상위 offsetParent 까지 반복적으로 더한다.
pos = [el.offsetLeft, el.offsetTop];
parent = el.offsetParent;
if(parent != el){
while(parent){
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}
//오페라와 사파리의 'absolute' position의 경우
//body의 offsetTop을 잘못 계산하므로 보정해야 한다.
var ua = navigator.userAgent.toLowerCase();
/*
//Javascript
if(ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && getStyle(el, 'position') == 'absolute')) {
pos[1] -= document.body.offsetTop;
}
*/
//jQuery
if(ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && $(el).css('position') == 'absolute')) {
pos[1] -= document.body.offsetTop;
}
}
if(el.parentNode) { parent = el.parentNode; }
else { parent = null; }
//body 또는 html 이외의 부모 노드 중에 스크롤되어 있는
//영역이 있다면 알맞게 처리한다.
while(parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if(parent.parentNode) { parent = parent.parentNode; }
else { parent = null; }
}
return {x: pos[0], y: pos[1]}
},
//필수 : 요소(element) 위치 설정
setXY = function(el, x, y){
var pageXY = getXY(el);
if(pageXY === false) {return false;}
//var position = getStyle(el, 'position'); //Javascript 사용자함수
var position = $(el).css('position'); //jQuery
//position이 static인 경우, left와 top이 적용되지 않으므로,
//position을 relative로 변경
if(!position || position == 'static') {
el.style.position = 'relative';
}
var delta = {
/*
//Javascript 사용자함수
x: parseInt(getStyle(el, 'left'), 10), //position이 relative인 경우 보정을 위한 값 저장
y: parseInt(getStyle(el, 'top'), 10)
*/
//jQuery
x: parseInt($(el).css('left'), 10), //position이 relative인 경우 보정을 위한 값 저장
y: parseInt($(el).css('top'), 10)
};
if(isNaN(delta.x)) { delta.x = 0; } //position이 static이었던 경우, left와 top값이 없으므로 x와 y의 값에 0을 할당
if(isNaN(delta.y)) { delta.y = 0; }
if(x != null) {
el.style.left = (x - pageXY.x + delta.x) + 'px';
}
if(y != null) {
el.style.top = (y - pageXY.y + delta.y) + 'px';
}
},
//필수 : 마우스 왼쪽 클릭여부
isLeftButton= function(event) {
return (event.which) ? event.which == 1 && event.button == 0 : (event.type == 'click') ? event.button == 0 : event.button == 1;
};