[jstree] jstree 예제1 - tree
예제 실행을 위해서는
1) http://www.jstree.com/ 접속하셔서
2) jstree_pre1.0_fix_1.zip을 다운로드 받아 압축풀고요
3) 웹서버 하나 만들고 (저는 이클립스에서 톰캣웹서버로 msite라는 웹프로젝트 만듬)
4) 웹프로젝트에 jtree라는 디렉토리를 만들고
5) 압축 푼 jstree_pre1.0_fix_1.zip를 jtree에 복사합니다.
6) 예제는 jtree 디렉토리에 ex1.jsp, ex2.jsp 식으로 파일을 생성해서
테스트를 진행했습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree example demo1</title>
<script type="text/javascript" src="./_lib/jquery.js"></script>
<script type="text/javascript" src="./_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="./_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
</head>
<body class="nosidebar">
<div id='demo1' class='demo'>
<ul>
<li id='phtml_1'><a href='#'>부모 노드 1</a>
<ul>
<li id='phtml_2'><a href='#'>자식 노드 1</a></li>
<li id='phtml_3'><a href='#'>자식 노드 2</a></li>
<li id='phtml_4'><a href='#'>자식 노드 3</a></li>
</ul>
</li>
<li id='phtml_5'><a href='#'>부모 노드 2</a>
<ul>
<li id='phtml_6'><a href='#'>자식 노드 1</a></li>
<li id='phtml_7'><a href='#'>자식 노드 2</a></li>
<li id='phtml_8'><a href='#'>자식 노드 3</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#toggle_node").click(function() {
$("#demo1").jstree("toggle_node", "#phtml_1");
});
$("#demo1").bind("open_node.jstree close_node.jstree", function(e) {
$("#log1").html("Last operation: " + e.type);
}).jstree({
"themes" : {
"theme" : [ "apple" ]
}, // 트리 테마
"ui" : {
"initially_select" : [ "phtml_2" ]
},
"core" : {
"initially_open" : [ "phtml_1" ],
"html_titles" : [ "true" ]
},
"plugins" : [ "themes", "html_data" ]
});
});
</script>
<div id="log1">log</div>
</body>
</html>
[jstree] jstree 예제1 - tree
'programming > jstree' 카테고리의 다른 글
| [jstree] jstree 예제4 - node id 가져오기 (0) | 2012.09.28 |
|---|---|
| [jstree] jstree 예제3 - drag and drop (0) | 2012.09.28 |
| [jstree] jstree 예제2 - 노드 편집 (0) | 2012.09.28 |
| [jstree] jstree theme - themes 테마 (0) | 2012.09.28 |