corrade-nucleus-nucleons – Blame information for rev 24
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
20 | office | 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> |