Mercurial > repos > mingchen0919 > aurora_htseq

annotate vakata-jstree-3.3.5/demo/basic/index.html @ 0:803f4888f36a draft

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