jstree 메뉴 소스 다운로드 및 기본 사용법

<a href="javascript:checkVirus('grpid%3D1DpW4%26fldid%3DMw8U%26dataid%3D1%26fileid%3D1%26regdt%3D20110209103612&url=http%3A%2F%2Fcfile254.uf.daum.net%2Fattach%2F110FA2404D51E2D7252EAA')"><img src="https://t1.daumcdn.net/daumtop_deco/icon/icon.hanmail.net/editor/p_zip_s.gif?rv=1.0.1" border="0" alt="첨부파일" class="vam"/> jsTree.v.1.0rc2.zip</a>   <A href="http://www.jstree.com/"></A>다운로드 사이트: <A class=tx-link href="http://www.jstree.com/" target=_blank>http://www.jstree.com/</A></A>   기본사용법 참고 사이트: <A class=tx-link href="http://frontjang.tistory.com/146" target=_blank>http://frontjang.tistory.com/146</A>   == 라이브러리 기본 폴더 위치 == * 최상위  js 디렉토리  themes 디렉토리  sample01.html   * js 디렉토리 하위  jquery.js  jquery.jstree.js   * themes 디렉토리 : 테마별 디렉토리가 있으며 각각의 테마별 디렉토리 하위에는 트리에 사용되는 이미지와 style.css 파일이 있는데 이 style.css 파일을 링크를 걸어서 사용해야지만 정상적으로 화면에 트리구조 UI가 보여진다.     ==== sample01.html 파일을 통한 기본 설정방법 ==== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<A href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</A>"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jstree 기본 사용법</title> <link rel="stylesheet" type="text/css" href="themes/default/style.css"/> <script type="text/xxxxjavascript" src="js/jquery.js"></script> <script type="text/xxxxjavascript" src="js/jquery.jstree.js"></script> <style type="text/css">  body {   font-size: 12px;   } </style> </head>  <body>  <input type="button" class="button" value="toggle_node" id="toggle_node" />  <div id="tree_container">   <ul>    <li id="first_menu">    <a href="#">첫번째 상위메뉴</a>     <ul>      <li id="second_menu1"><a href="#">첫번째 하위메뉴</a></li>      <li id="secone_menu2"><a href="#">두번째 하위메뉴</a></li>     </ul>        </li>   </ul>  </div> <script type="text/xxxxjavascript" class="source"> $(function () {  $("#toggle_node").click(function () {   /*    tree_container라는 id를 가지는 div가 jstree 메뉴를 감싸고 있는 컨테이너가 된다.     jstree("toggle_node","#first_menu")의 의미는 toggle_node라는 id를 가지는 버튼을 클릭했을때, first_menu라는 id를 가지는 첫번째    li 노드에 토글(하위 메뉴 열림/닫힘) 기능을 적용하라는 의미이다.  */    $("#tree_container").jstree("toggle_node","#first_menu"); // 특정한 노드에 토글을 적용시킬때 사용할 수 있음.  });  // 아래와 같이 themes 플러그인과 html_data 플러그인은 기본적으로 설정을 해줘야지만 정상적으로 jstree 기능이 동작한다. themes 플러그인은 트리의 테마를 적용하고, html_data 플러그인은 div 컨테이너내의 html 태그들에게 jstree 메뉴 기능을 적용한다.  $("#tree_container").jstree({ "plugins" : [ "themes", "html_data" ] }); }); </script> </body> </html>