Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1 
<!DOCTYPE html>
2 
<html lang="en">
3 
<head>
4 
	<meta charset="UTF-8">
5 
	<title>jstree basic demos</title>
6 
	<style>
7 
	html { margin:0; padding:0; font-size:62.5%; }
8 
	body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
9 
	h1 { font-size:1.8em; }
10 
	.demo { overflow:auto; border:1px solid silver; min-height:100px; }
11 
	</style>
12 
	<link rel="stylesheet" href="./../../dist/themes/default/style.min.css" />
13 
</head>
14 
<body>
15 
	<h1>HTML demo</h1>
16 
	<div id="html" class="demo">
17 
		<ul>
18 
			<li data-jstree='{ "opened" : true }'>Root node
19 
				<ul>
20 
					<li data-jstree='{ "selected" : true }'>Child node 1</li>
21 
					<li>Child node 2</li>
22 
				</ul>
23 
			</li>
24 
		</ul>
25 
	</div>
26 
 
27 
	<h1>Inline data demo</h1>
28 
	<div id="data" class="demo"></div>
29 
 
30 
	<h1>Data format demo</h1>
31 
	<div id="frmt" class="demo"></div>
32 
 
33 
	<h1>AJAX demo</h1>
34 
	<div id="ajax" class="demo"></div>
35 
 
36 
	<h1>Lazy loading demo</h1>
37 
	<div id="lazy" class="demo"></div>
38 
 
39 
	<h1>Callback function data demo</h1>
40 
	<div id="clbk" class="demo"></div>
41 
 
42 
	<h1>Interaction and events demo</h1>
43 
	<button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
44 
	<div id="evts" class="demo"></div>
45 
 
46 
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
47 
	<script src="./../../dist/jstree.min.js"></script>
48 
 
49 
	<script>
50 
	// html demo
51 
	$('#html').jstree();
52 
 
53 
	// inline data demo
54 
	$('#data').jstree({
55 
		'core' : {
56 
			'data' : [
57 
				{ "text" : "Root node", "children" : [
58 
						{ "text" : "Child node 1" },
59 
						{ "text" : "Child node 2" }
60 
				]}
61 
			]
62 
		}
63 
	});
64 
 
65 
	// data format demo
66 
	$('#frmt').jstree({
67 
		'core' : {
68 
			'data' : [
69 
				{
70 
					"text" : "Root node",
71 
					"state" : { "opened" : true },
72 
					"children" : [
73 
						{
74 
							"text" : "Child node 1",
75 
							"state" : { "selected" : true },
76 
							"icon" : "jstree-file"
77 
						},
78 
						{ "text" : "Child node 2", "state" : { "disabled" : true } }
79 
					]
80 
				}
81 
			]
82 
		}
83 
	});
84 
 
85 
	// ajax demo
86 
	$('#ajax').jstree({
87 
		'core' : {
88 
			'data' : {
89 
				"url" : "./root.json",
90 
				"dataType" : "json" // needed only if you do not supply JSON headers
91 
			}
92 
		}
93 
	});
94 
 
95 
	// lazy demo
96 
	$('#lazy').jstree({
97 
		'core' : {
98 
			'data' : {
99 
				"url" : "//www.jstree.com/fiddle/?lazy",
100 
				"data" : function (node) {
101 
					return { "id" : node.id };
102 
				}
103 
			}
104 
		}
105 
	});
106 
 
107 
	// data from callback
108 
	$('#clbk').jstree({
109 
		'core' : {
110 
			'data' : function (node, cb) {
111 
				if(node.id === "#") {
112 
					cb([{"text" : "Root", "id" : "1", "children" : true}]);
113 
				}
114 
				else {
115 
					cb(["Child"]);
116 
				}
117 
			}
118 
		}
119 
	});
120 
 
121 
	// interaction and events
122 
	$('#evts_button').on("click", function () {
123 
		var instance = $('#evts').jstree(true);
124 
		instance.deselect_all();
125 
		instance.select_node('1');
126 
	});
127 
	$('#evts')
128 
		.on("changed.jstree", function (e, data) {
129 
			if(data.selected.length) {
130 
				alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
131 
			}
132 
		})
133 
		.jstree({
134 
			'core' : {
135 
				'multiple' : false,
136 
				'data' : [
137 
					{ "text" : "Root node", "children" : [
138 
							{ "text" : "Child node 1", "id" : 1 },
139 
							{ "text" : "Child node 2" }
140 
					]}
141 
				]
142 
			}
143 
		});
144 
	</script>
145 
</body>
146 
</html>