Mercurial > repos > mingchen0919 > aurora_star_site

comparison vakata-jstree-3.3.5/demo/basic/index.html @ 0:c12e291895ff draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
planemo upload commit 104ae24ee30761a0099eeb91362ed1e3e13aba4b
author mingchen0919
date Tue, 01 May 2018 10:45:22 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:c12e291895ff
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>