Floating Window

플로우팅 윈도우 표시



HTML

링크의 텍스트를 a 태그로 감싸고 class 속성에 "open"을 설정합니다. 이 a 태그는 나중에 jQuery로 플로우팅 윈도우를 여는 click 이벤트를 설정하는 태그입니다. 플로팅 윈도우 안에 표시하는 HTML은 id속성에 "floatWindow"를 주고 div 태그 안에 기술합니다. 이 div 태그는 body 태그의 바로 아래 배치할 필요가 있기 때문에 body 태그를 닫기 직전에 기술하는 것이 좋습니다. div 태그의 안쪽에는 플로팅 윈도우의 "닫힘" 버튼을 img 태그로 기술하고 class 속성에 "close"를 설정한 a 태그로 감쌉니다. 실제로 윈도우 안에 표시하는 내용은 dl/dt/dd 태그를 사용하고, dt 태그에 플로팅 윈도우의 핸들러(드래그&드롭 할 경우에 선택되는 부분, 제목 표시줄에 해당)를 dd 태그에 텍스트 등의 컨텐츠를 기술합니다.

							

플로우팅 윈도우 표시

닫힘
jQuery를 이용하여 플로우팅 윈도우 만들기
이번에는 jQuery를 이용하여 플로우팅 윈도우..(중략)...윈도우를 표시할 수 있습니다.


CSS

플포팅 윈도우(#floatWindow)는 display:none을 설정하여 비표시 상태로 하고 position:absolute와 top 속성, left 속성에 초기 표시 위치를 설정합니다. top 속성과 left 속성에는 body태그, 즉 웹 페이지의 왼쪽 위를 기준으로 하여 위치를 px로 설정합니다.
"닫힘"버튼의 a.close는 position:absolute로 설정하여 핸들러의 오른족에 배치합니다. dl 태그에는 플로팅 윈도우의 외곽 이미지를 background속성으로 설정합니다. 위의 샘픔에서는 페이지 위에 윈도우가 떠있는 느낌을 주기 위해 드롭섀도우가 붙은 투명 PNG 이미지를 준비합니다.
그 외에 dt/dd 태그에는 각각 행간과 여백 등의 설정을 하고 있습니다. dt 태그에는 마우스 포인터의 모양을 변경하는 cursor 속성에 "move"를 설정하여 이동 가능하다는 것을 알 수 있게 합니다.

							#floatWindow{display:none;position:absolute;width:500px;height:400px;top:100px;left:100px;}
							#floatWindow a.close{position:absolute;right:20px;top:1px;}
							#floatWindow a.close img{border:none;}
							#floatWindow dl{width:100%;height:100%;background:url("/florakid_lib/images/sample2/floatWindow.png");margin:0;}
							#floatWindow dl dt{height:25px;line-height:25px;text-indent:1em;color:white;font-weight:bold;cursor:move;}
							#floatWindow dl dd{margin:0;padding:2em;line-height:1.5;text-indent:1em;}
						


JAVASCRIPT

							$(function(){
								$("a.open").click(function(){
									$("#floatWindow").fadeIn("fast");
									return false;
								});
								
								$("#floatWindow a.close").click(function(){
									$("#floatWindow").fadeOut("fast");
									return false;
								});

								$("#floatWindow dl dt").mousedown(function(e){
									
									$("#floatWindow")
										.data("clickPointX" , e.pageX - $("#floatWindow").offset().left)
										.data("clickPointY" , e.pageY - $("#floatWindow").offset().top);
									
									$(document).mousemove(function(e){
										$("#floatWindow").css({
											top:e.pageY  - $("#floatWindow").data("clickPointY")+"px",
											left:e.pageX - $("#floatWindow").data("clickPointX")+"px"
										});
									});
								}).mouseup(function(){
									$(document).unbind("mousemove");
								});
							});	
						

먼저 플로팅 윈도우의 표시 처리를 설정하고 있습니다. class 속성이 "open"인 a 태그가 클릭되면 플로팅 윈도우(#floatWindow)를 fadeIn()을 이용해 애니매이션 효과를 주어 표시합니다. a 태그에 대해서 click 이벤트를 설정하는 경우 return false;를 잊지 말고 기술하도록 합니다.

							$("#floatWindow a.close").click(function(){
								$("#floatWindow").fadeOut("fast");
								return false;
							});
						

마찬가지로 #floatWindow 안에 "닫힘" 버튼(a.close)에는 플로팅 윈도우를 fadeOut()으로 비표시 하는 처리를 기술합니다.

							$("a.open").click(function(){
								$("#floatWindow").fadeIn("fast");
								return false;
							});
						

다음으로 핸들러(#floatWindow 안에 dt 태그)에 대해서 mousedown 이벤트와 mouseup 이벤트를 설정합니다. 핸들러상에서 마우스 버튼이 눌리면 플로팅 윈도우의 위치를 마우스 포인터의 위치로 변경하는 처리(드래그 처리)를 추가하고 마우스 버튼이 떨어지면 드래그 처리를 제거하도록 설정합니다.

							$("#floatWindow dl dt").mousedown(function() {
								// 드래그 처리 추가
							}).mouseup(function() {
								// 드래그 처리 제거
							});	
						

드래그 처리에서는 우선 플로팅 윈도우에서 마우스 버튼이 눌린 위치를 계산합니다. mousedown(function(e) {...}) 안에서는 body 태그로부터 마우스 포인터까지의 거리(마우스 포인터의 좌표)가 e.pageX와 e.pageY로 저장되어 있습니다. 또한 셀렉터로 지정한 태그의 표시 위치(좌표)를 $(셀렉터).offset().top과 $(셀렉터).offset().left로 가져올 수 있습니다. 이 명령들을 이용해 현재의 프롤팅 윈도우의 좌표로부터 마우스 포인터의 좌표를 빼면 플로팅 윈도우 위의 마우스 포인터의 좌표(플로팅 윈도우의 왼쪽 위를 기점으로 하는 거리)를 구할 수 있습니다.
계산한 플로팅 윈도우의 마우스 포인터 좌표를 data()를 사용하여 임시 보관해 둡니다(clickPointX, clickPointY).

							$("#floatWindow")
								.data("clickPointX", e.pageX-$("#floatWindow").offset().left)
								.data("clickPointY", e.pageY-$("#floatWindow").offset().top);
						

이어서 document에 대해서 mousemove 이벤트를 설정합니다. document에 mousemove 이벤트를 설정하면 웹 페이지 위에서 마우스 포인터가 움직일 때마다 지정한 명령이 실행됩니다. 여기서는 마우스의 움직임이 발생할 때마다 css()로 #floatWindow의 top속성과 left속성을 설정하는 처리를 기술합니다.
#floatWindow()의 top속성과 left속성에는 e.pageY와 e.pageX로 가져온 현재의 마우스 포인터 좌표로부터 data()로 보관하고 있는 clickPointY. clickPointX(플로팅 윈도우 위의 마우스 포인터 좌표)를 뺀 값을 설정합니다. 그러면 마우스 포인터가 이동한 거리에 대한 플로팅윈도우의 위치도 변경됩니다.

							$(document).mousemove(function(e){
								$("#floatWindow").css({
									top:e.pageY  - $("#floatWindow").data("clickPointY")+"px",
									left:e.pageX - $("#floatWindow").data("clickPointX")+"px"
								});
							});
						

다만 이대로라면 마우스 버튼이 떨어져도 드래그 처리가 끝나지 않기 때문에 mouseup 이벤트를 설정하고 버튼이 떨어지면 드래그 처리를 제거하도록 한여야 합니다. unbind()를 사용하여 mouseup()를 제가합니다.

							$(document).unbind("mousemove");
						


** 추가적인 문제: IE6에서 버그 제거하기

상기 샘플의 플로팅 윈도우를 IE6에서 열면 드레그 조작 시에 핸들어 부분의 텍스트와 웹 페이지의 일부가 선택 상태가 되어 버리는 경우가 있습니다. 이 문제는 IE6의 텍스트 선택 기능이 드래그 처리에 관계없이 동작하는 것이 원인으로 드레그 조작 시에만 IE6의 선택 기능을 일시적으로 동작하지 않게 하도록 하여 해결할 수 있습니다.
IE6의 선택 기능은 mousedown 이벤트와 mouseup 이벤트에 아래와 같은 내용을 추가하여 동작하지 않게 할 수 있습니다.

							$("#floatWindow dl dt").mousedown(function(){
								$("body").bind('selectstart', function() {
									return false;
								});
							}).mouseup(function(){
								$("body").unbind('selectstart');
							});							
						

selectstart는 선택 개시할 때의 처리를 설정할 수 있도록 IE에서 제공하는 이벤트 selectstart에 대해서 return false;를 설정하면 IE6의 선택 기능을 일시적으로 동작하지 않게 할 수 있습니다. 드래그가 끝나는 시점에 selectstart를 unbind()로 설정하면 선택 기능을 원래대로 동작하도록 되돌릴 수 있습니다.

또한 이벤 샘플에서는 페이지 위에 떠있는 느낌을 내기 위해 투명 PNG를 이용하고 있습니다만, 투명 PNG에 대응하지 않는 IE6에서는 적절히 표시되지 않습니다. IE6의 투명 PNG를 표시하려면 background가 아닌 AlphaImageLoader를 사용합니다. 아래의 CSS에서는 스타 핵을 이요하여 IE6의 경우만 AlphaImageLoader로 배경을 표시하도록 설정하고 있습니다. 그리고 AlphaImageLoader를 설정한 태그의 자식 태그에는 position:relative를 지정하지 않으면 mousedown 이벤트와 mouseup 이벤트가 동작하지 않게 되기 때문에 *(유니버셜 셀렉터)를 이용하여 모든 태그에 position:relative를 설정하고 있습니다.

							* html #floatWindow dl
							{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/florakid_lib/images/sample2/floatWindow.png", sizingMethod='scale');}
							* html #floatWindow dl *{position:relative;}
						

# 참고
selectstart를 jQuery에서 사용할 때에는 bind('selectstart' fucntion() { ...})에서 설정합니다. bind()는 임의의 이벤트 처리를 설정하는 명령입니다.



투명 PNG의 페이드인/페이드아웃 효과가 검게 변하는 경우

상기 샘플과 같이 투명 PNG를 포함한 태그를 IE6~IE8에서 페이드인/페이드아웃 효과를 내려고 하면 순간적으로 투명 부분이 검게 칠해진 것 처럼 표시되는 경우가 있습니다.

이 현상은 jQuery의 fadeIn() / fadeOut() 과 IE와의 호환성 문제로 발생하는 문제입니다. 어떻게 해서든지 투명 PNG를 사용하고 싶은 경우는 IE만 애니메이션을 쓰지 않는 방법도 있습니다. 아래와 같이 if문으로 처리를 분기하면 IE의 경우는 show() / hide()로, 그 외의 브라우저는 fadeIn() /fadeOut()으로 표시/비표시를 변경할 수 있습니다.

							if($.browser.msie) { // 브라우저 탐지
								$("#floatWindow").show();
							}else{
								$("#floatWindow").fadeIn("fast");
							}
						
닫힘
jQuery를 이용하여 플로우팅 윈도우 만들기
이번에는 jQuery를 이용하여 플로우팅 윈도우..(중략)...윈도우를 표시할 수 있습니다.