[html] menu frame 페이지 folding(resize) 처리

Frame으로 구성되어 있는 기존 시스템에
메뉴를 숨기는 기능을 추가하기로 했다.

어떻게 할까? 

1. frame size 를 조절할 수 있어야 하고,
2. 숨기기 버튼이 지정된 위치에 고정되어 표시되어야 하고,
3. 숨기기/보이기 버튼이 상황에 따라 활성화 되어야 한다. 

solution)
1. frameset 의 attribute에는 cols, rows 가 있다.
이 값들을 자바스크립트에서 설정할 경우 변경이 가능하다.
[Frame page]

// for menu frame size restore

function res() {

 var fs = document.getElementById('fset2');

 if (fs) {

   fs.rows = '1*';

   fs.cols = '205,*,1';

 }

}

// for menu frame size minimize

function min() {

 var fs = document.getElementById('fset2');

 if (fs) {

     fs.cols = '5%,95%';

 }

}

frameset 은 다음과 같다.
[Frame page]

<frameset id='fset2' cols='205,*,1' rows='1*'>

2. 숨기기 버튼의 위치 고정
컨텐츠 영역과 버튼 영역을 구별하고
[Menu page]

<div class="left_lnb_wrap" id="target">

... menu contents here

</div>

<div class="fold_button_area">

<div id="foldButton" class="fold_button">

<button type="button" class="button" onclick="foldSideBar('up');" title="왼쪽영역 닫기"><img src="/images/btn_left_close.jpg" width="25" height="28" alt="왼쪽영역 닫기" /></button>

</div>

<div id="unFoldButton" class="unfold_button">

<button type="button" class="button" onclick="foldSideBar('down');" title="왼쪽영역 열기"><img src="/images/btn_left_open.jpg" width="25" height="28" alt="왼쪽영역 열기" /></button>

</div>

</div>

스타일을 적용한다.  
[Menu page] 

/* 레이아웃 - 영역 열기버튼, 닫기버튼 */

#container #content_wrap.width_full {margin-left:0; margin-right:0;}

.fold_button {position:absolute; top:150px; left:150px;}

.unfold_button {display:none; position:absolute; top:150px; left:0;}

.fold_button_up {position:absolute; top:90px; right:0;}

.unfold_button_down {display:none; position:absolute; top:0; right:0;}

.fold_button_right {position:absolute; top:150px; right:150px;}

.unfold_button_right {display:none; position:absolute; top:150px; right:0;}

.fold_button_right2 {position:absolute; top:150px; right:139px;}

.unfold_button_right2 {display:none; position:absolute; top:150px; right:0;}

3. 버튼 액션 구현
선택값에 따라 메뉴 컨텐츠를 숨기거나 보이고, 버튼 이미지를 교체할 수 있게 구현한다.
물론 frameset 이 있는 페이지에서 정의한 메소드를 호출하는 것을 잊으면 안된다.
frameset page 가 최상단일 경우, window.parent 대신 window.top 을 사용할 수 있다. 
[Menu page]

function foldSideBar(togle){

var targetArea = document.getElementById("target");

if(togle == "up"){

targetArea.style.display = "none";

document.getElementById("foldButton").style.display = "none";

document.getElementById("unFoldButton").style.display = "block";

window.parent.min();

}else{

targetArea.style.display = "block";

document.getElementById("foldButton").style.display = "block";

document.getElementById("unFoldButton").style.display = "none";

window.parent.res();

}

} 

뭐 요즘을 조금 둘러보면 나오는 기술이지만, 적용가이드 쓰는 겸해서 정리해본다. 
 

reference : http://www.cross-browser.com/toys/frame_resize.html

å