DTREE 트리구조 만들기

open all | close all

My example tree

Node 1

Node 2

Node 3

Node 4

My Pictures

Recycle Bin

위와같은 트리 구조를 만들고 싶다면, 사용하기 바란다.

첨부파일의
dtree.css
dtree.js
이 두가지 파일과
img폴더만 있으면 준비가 끝이다. 자세한 설명과 예제는 같이 있는 예제파일과, api.html 파일을 보면 알수 있겠지만 그래도 간단히 설명해주자면

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>

<script type="text/javascript">
d = new dTree('d'); //dtree선언
d.add(0,-1,'My example tree'); //최상위 루트, 참조가 없기때문에 -1
d.add(1,0,'Node 1','example01.html'); 
d.add(2,0,'Recycle Bin','example01.html','','','img/trash.gif');

document.write(d); //화면에 표시
</script>

식으로 사용하면 될것이다.
그리고 add()의 파라미터들을 설명하자면
mytree.add( p1, p2, p3, p4, p5, p6, p7 ) 에서
p1 : id값
p2 : 부모참조 id값. 여기에 적힌 id가 부모노드가 된다
p3 : 표시될 노드의 이름
p4 : 해당 노드를 클릭했을때 이동될 페이지 주소
p5 : 해당노드의 이름에 마우스를 가져다 대면 뜨는 설명
p6 : a태그의 target에 해당하는값. 보통 새창에서 열리게 할때 쓰임
p7 : 이미지경로및 이름. 여기에 적힌 이미지가 표시된다. 안적을경우엔 기본값으로 표시

나머지 모든트리를 표시하는 mytree.openAll();나, 모든 하위트리를 감추는 mytree.closeAll(); 같은 함수들도 있으니 api를 잘 참조하길 바란다.