jQuery | javascript | CSS
01.jQuery - jstree 기본 구성
Godffs
2014. 8. 21. 02:30
반응형
jstree 사이트에서 파일을 다운받아 압축을 풀고 프로젝트에 추가하였습니다.
_docs\ui.html 예제 내용입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <%--인터넷 7,8에서 깨짐 해결방안--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html" charset="utf-8" />
<title>카테고리 설정</title>
<script src="../Common/Treeviewjs(jstree)/jquery.js" type="text/javascript"></script>
<script src="../Common/Treeviewjs(jstree)/jquery.jstree.js" type="text/javascript"></script>
<link href="../Common/Treeviewjs(jstree)/!style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='demo1' class='demo'>
<ul>
<li id="phtml_1">
<a href="#">Root node 1</a>
<ul>
<li id="phtml_2">
<a href="#">Child node 1</a>
</li>
<li id="phtml_3">
<a href="#">Child node 2</a>
</li>
</ul>
</li>
<li id="phtml_4">
<a href="#">Root node 2</a>
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#demo1").jstree({
"ui": {
"select_limit": -1,
"select_multiple_modifier": "alt", //중복 선택시 사용할 키
"selected_parent_close": "select_parent",
"initially_select": ["phtml_2"]
},
"core": { "initially_open": ["phtml_1"] },
"plugins": ["themes", "html_data", "ui"]
});
});
</script>
</body>
</html> |
결과확인
참 쉽죠~?
끝~
끝~
반응형