jsTree.v.1.0rc2.zip
다운로드 사이트: http://www.jstree.com/
기본사용법 참고 사이트: http://frontjang.tistory.com/146
== 라이브러리 기본 폴더 위치 ==
* 최상위
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" "http://www.w3.org/TR/html4/loose.dtd">
<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>