본문 바로가기

프로그래밍/Java/Javascript/Html

프레임구조에서의 프레임크기 변경 스크립트

















출처 :
http://phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=66582&page=1
작성자 : LinuxZZang

안녕하세요.

거의 모든 분이 다 아시는 내용이겠지만 혹시나 필요하신분이 있을까 해서
아주 저렴한 "0원짜리 팁"으로 올립니다. ^^

가끔 어쩔수 없이 프레임구조를 사용하면서 세로로 화면을 나누어 놓았을 경우
아래처럼 왼쪽의 프레임은 대부분 메뉴페이지가 되고,
오른쪽은 내용을 보여주는 메인페이지가 되는 경우가 많습니다만..
------------------------------------------
| 메뉴1  |  내용                  |     
| 메뉴2  |                          |
| 메뉴3  |                          |
|          |                          |
|          |                          |
------------------------------------------
가끔씩은 필요할때 왼쪽의 메뉴페이지를 숨겨버리고 싶을 때가 있습니다.
물론 레이어로 처리하는 방법도 있지만 이런식으로 프레임구조에서 처리하는 방법도
있습니다.

총 3개의 파일입니다.
index.html --> frameset을 가진 파일
left.html    --> 왼쪽메뉴파일
main.html  --> 오른쪽 메인파일
----------------------------------------------------
index.html
<html>
<frameset name="totalWin" cols="200,*">
  <frame src="left.html">
    <frame src="main.html">
</frameset>
</html>

---------------------------------------------------------
left.html
<HTML><BODY>
메뉴1<br>
메뉴2<br>
메뉴3<br>
</BODY></HTML>

----------------------------------------------
main.html
<HTML><HEAD><script>
function resizeMenu()
{
    if(parent.totalWin.cols == "200,*")// 프레임에서 왼쪽프레임 크기 확인
    {
        parent.totalWin.cols = "0,*";// 프레임에서 왼쪽프레임 크기를 0으로 변경
        document.getElementById("resizeBtn").value ="메뉴보이기";// 버튼의 글자 변경
        //document.frm.resizeBtn.value = "메뉴보이기";//좀 저렴(^^)해 보이는 글자변경 방식
    }
    else
    {
        parent.totalWin.cols = "200,*";
        document.getElementById("resizeBtn").value ="메뉴숨기기";
        ///document.frm.resizeBtn.value = "메뉴숨기기";
    }
}
</script></HEAD>
<BODY><form name='frm'>
<input type='button' name='resizeBtn' value='메뉴숨기기' onClick='resizeMenu();'><br>
메인메뉴<br>메인메뉴<br>메인메뉴<br></form></BODY></HTML>
-------------------------------------------------------------------------------

가끔씩은 이런 0원짜리 팁이 필요할때가 있더군요.

감사합니다. 꾸벅.