트리메뉴 및 노프레임

몇년전, 제로보드4로 만든 제 홈페이지를 블로그스러웁게 만드려고 많은 시도들을 했었습니다.
그 중 멋진 트리메뉴 구하기가 하늘에 별 따기라서, 그나마 가장 비슷한 자료를 구해서 엄청 복잡다단하게 수정해서 간신히 트리메뉴를 블로그스럽게 구현해서 쓰다가, 우연한 계기로 김창수님과 드라코님의 도움으로 정말 마음에 쏙드는 트리메뉴를 구할 수 있게 되었습니다. 예전 게시판들을 뒤져보니 그게 벌써 2005년 10월의 일이네요.

예전부터, 몇몇분들이 저 트리메뉴를 무척 탐내하셨는데, 나중에 기회되면 제대로 소개해서 올리겠다고 하고 계속 미루다가,, 에르펜님께서 지나가는 말로 슬쩍 물어보시길래, 이때다 싶어 이번참에 마무리 짓습니다.
적용도 아주 쉽고, 무엇보다도 제로보드4를 쓰면서 노프레임으로 구성한 경우 효과가 매우 좋습니다.
헤더나 풋터에 저와같은 트리메뉴를 구현하면, 외부에서 제로보드 게시판으로 직접 접근했을때 해당 트리가 열려진 효과가 있습니다.(노프레임이 아닌 프레임을 각각 나눈 홈페이지의 트리메뉴 효과는 글쎄..)
참고적으로 노프레임에 대해서 다른분들의 포스팅을 몇개 링크합니다.
- [초보용]노프레임과 헤더푸터 개념잡기
- 초보를 위한 노프레임페이지 사용시 배경음악 넣기

첨부한 dtree.zip 파일은 트리메뉴의 자바스크립트가 포함되어 있고, 위의 예제 페이지도 포함되어 있습니다.

dtree.zip

1. 압축을 풀어 dtree 폴더를 통채로 홈페이지에 업로드 합니다.
2. dtree폴더내 head.php 파일을 열어서 상단부분과 중간부분을 수정합니다.
    - 상단부분, 자신의 계정에 맞는 제로보드 폴더 경로 및 절대경로 등등.(항상 끝은 / 로 끝나야 함)
    - 중간부분, 자신의 게시판 아이디로 수정 입력.
3. 수정한 head.php 파일을 dtree 폴더에 업로드하여 덮어씁니다.
4. 브라우저 창에 본인계정의 ex.html 주소로 접근합니다.
    - 예를들면)  http://홈페이지/dtree/ex.html               
5. 위와 같이 직접 테스트하신후, head.php 파일의 내용을 잘 파악하여 본인의 실제 헤더에 대입해 봅니다.
6. dtree.css 부분은 본인이 원하는 폰트스타일로 직접 수정하셔도 됩니다.

(Language : c)

1. <link rel="StyleSheet" href="<?=$_zb_dtree?>dtree.css" type="text/css" />
2. <script type="text/javascript" src="<?=$_zb_dtree?>dtree.js"></script>

이 부분은 꼭 헤더 상단에 선언되어야 하며, <?=$_zb_dtree?>는 직접 경로를 입력해도 됩니다.

(Language : c)

1. <?php
2.   if($id=="manual") {
3.     if($category=="1") {
4.         $open_tree = 21;
5.     } elseif($category=="2") {
6.         $open_tree = 22;
7.     } else {
8.         $open_tree = 20;
9.     }
10.   }
11.   elseif($id=="gskin_notice") { $open_tree = 11; }
12.   elseif($id=="ggerzerskin") { $open_tree = 12; }
13.   elseif($id=="ggerzer_skin") { $open_tree = 6; }
14.   elseif($id=="ggerzer_diary") { $open_tree = 10010; }
15.   elseif($id=="ggerzer_diary2_BType") { $open_tree = 101; }
16.   elseif($id=="skin_test") { $open_tree = 100; }
17.   else { $open_tree = 0; }
18. ?>

- 이 부분에서 본인의 실제 게시판 아이디에 따른, 중복되지 않는 번호($open_tree)를 각각 매깁니다.
- 하나의 게시판을 카테고리별로 나눠서 트리메뉴를 구현하는것도 가능합니다($id=="manual" 부분처럼)
- 제로보드게시판이 아닌 일반 html 문서도 트리메뉴를 구현할 수 있으며, 그럴때는 $id를 게시판 아이디가 아닌, 본인이 직접 임의로 지정한 아이디를 부여합니다.($id=="skin_test" 부분처럼)

(Language : c)

1. d.add(100,3,'Information','http://ggerzer.com/ggerzer_skin.html?id=skin_test','스킨에 관한 기본정보 확인');

- 제로보드가 아닌 일반 html문서일 경우, 마찬가지로 일반 html문서도 노프레임으로 만들어 동일한 헤더와 풋터파일을 include 할 경우에, 위와같이 ggerzer_skin.html?id=skin_test 로 링크를 연결하는 것만으로도 오픈트리가 가능해집니다. 만약 ggerzer_skin.html로 직접 접근했을때는 트리메뉴는 초기화상태가 됩니다.


참고적으로, 노프레임의 경우 이미지경로가 유동적이 될 수 있기때문에, 가급적이면  dtree.js 파일에서

(Language : c)

1.         root                : 'img/base.gif',
2.         folder      : 'img/folder.gif',
3.         folderOpen  : 'img/folderopen.gif',
4.         node                : 'img/page.gif',
5.         empty            : 'img/empty.gif',

이부분에서 'img/base.gif' 대신에 'http://ggerzer.com/dtree/img/base.gif' 와 같이 주소를 정확하게 입력해주세요. 안그러면, 상대적인 위치에서의 img 폴더를 찾기때문에 경우에 따라서는 엑박이 뜰 수 있습니다.


본 head.php 소스에 제가 개인적으로 추가한 내용중에는,
게시판별 새글 아이콘/동일게시판의 카테고리별 새글 아이콘/게시판별 게시물수/몇몇게시판의 게시물수 합계/게시판의 카테고리별 게시물수 (0=모든카테고리, 그외 카테고리고유번호)
등등이 기본적으로 포함되어 있습니다.


본 포스팅은 차후 내용을 보충해야되는 부분이 생기면 그때그때 수정하겠습니다.



2009-03-28 추가..

php 라는게 html 과 비슷합니다.
<?php
로 열어서
?>
로 닫으면 일단락이 되는것이구요.
if 와 elseif 와 else 만 알면 응용할것들이 무궁무진해집니다.
위의 예제에서는, $open_tree 의 변수를 정의해주는 부분이 <script 시작전에 선행되어져야 합니다.
 
만약에(if) $id가 manual 일때는 $open_tree를 20 으로 정의하고,
또다른만약에(elseif) $id가 ggerzer_skin 일때 $open_tree를 6 으로하고
또다른만약에, 또다른만약에, 또다른만약에를 넘어서 최종적으로
그외모든나머지(else)인 경우에는 $open_tree를 0으로 하자고,, 미리 약속을 해두는 부분입니다.

그렇게 되면, 주소창에서 http://홈페이지/bbs/zboard.php?id=ggerzer_skin  이렇게 입력하여 접근하게되었을때 id=ggerzer_skin 이 되므로, 위에서 미리 번호를 부여했던것을 따졌을때 $open_tree는 6으로 결정되어지는것입니다. 그 결과 트리메뉴에서 6번 node가 자동으로 열리게 됩니다.
즉, 게시판 각각의 아이디별로 선수의 등번호를 매기는 작업으로 생각하시면 됩니다.

- 실제 적용함수에 대해서..

d.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');
d.add(오픈트리번호,부모번호,'메뉴이름','링크주소','툴팁','링크타겟','이미지');

앞의 숫자는 위에서 아이디별로 부여했던 $open_tree의 번호에 해당하며, 뒤의 숫자는 부모번호에 해당합니다. 부모가 없을땐(1단계메뉴) 0을 입력하고, 만약 오픈트리 7번에 새끼를 쳐서 서브메뉴가 생성되었다면 그 부모인 7을 입력합니다. 그외 내용은 예제페이지의 소스를 분석하시면 쉽게 이해되실것입니다.

2009.03.30. 추가..
dtree.zip 파일에 icon_new.gif 이미지를 추가하였습니다..
head.php 파일 상단의 '새글 아이콘'과 관련한 소스가 추가되었기때문에, 새글이 올라온 경우에는 메뉴옆에 새글표시 ()가 뜨게 됩니다. 
그러기위해서는 원하는 새글표시 아이콘 이미지를 본인이 직접 구해서 적당한 폴더에 업로드하신후에
head.php 소스의 $new_icon 부분에서 아이콘이미지의 유효한 경로를 입력해서 사용하시면 됩니다.

dtree.css 파일을 직접 수정해서 사용하시면, 트리메뉴가 좀더 근사해질것입니다.
웹폰트를 적용해서 사용하시거나, 글자 크기나 색상들을 좀더 다양하게 사용하시면 더욱 깔끔합니다.
.dtree a.nodeSel 부분은 해당메뉴가 열린 상태의 폰트스타일입니다. 즉 [현재 보고있는 메뉴]를 나타냅니다.

d.config.closeSameLevel=true;
을 추가할 경우, 동일레벨은 닫아주는 기능이 활성화됩니다.
예를들어 4번 메인메뉴를 클릭해서 그 서브메뉴를 보다가 2번 메인메뉴를 클릭할 경우, 4번 서브메뉴를 닫고나서 2번 서브메뉴를 펼칩니다.
위의 내용을 추가하지 않을 경우에는 비활성.

d.config.useLines=false;
을 추가할 경우에는 라인을 표시해주지 않습니다.

메뉴가 심하게 많지 않을 경우에는, 기본적으로 트리메뉴가 Oepn.All 상태가 되도록 하는것도 나름 괜찮은 아이디어 입니다.

  <script language="JavaScript">
  d.openTo(<?=$open_tree?>, true);
  </script>

이 부분을

  <script language="JavaScript">
  d.openAll();
  d.openTo(<?=$open_tree?>, true);
  </script>

이렇게 수정하시면 됩니다.