[JAVASCRIPT][CSS] DTREE 트리구조 만들기

 dtree.zip

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

첨부파일의 

dtree.css

dtree.js

이 두가지 파일과

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

1 2 3 4 5 6 7 8 9 10 11

<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를 잘 참조하길 바란다.

 [출처] [JAVASCRIPT][CSS] DTREE 트리구조 만들기|작성자 b1ix

[출처] [JAVASCRIPT][CSS] DTREE 트리구조 만들기|작성자 b1ix