|
5
|
1 <!DOCTYPE html>
|
|
|
2 <html lang="en">
|
|
|
3 <head>
|
|
|
4 <meta charset="UTF-8">
|
|
|
5 <title>Light theme visual tests</title>
|
|
|
6 <link rel="stylesheet" href="./../../../dist/themes/default/style.min.css">
|
|
|
7 <link rel="stylesheet" href="./../../../dist/themes/default-dark/style.min.css">
|
|
|
8 <style>.tree { border:1px solid black; padding:10px; width:300px; margin:20px; float:left; min-height:200px; }</style>
|
|
|
9 </head>
|
|
|
10 <body style="background:white;">
|
|
|
11 <div class="tree" id="empty"></div>
|
|
|
12 <div class="tree" id="core"><ul><li>asdf</li></ul></div>
|
|
|
13 <div class="tree" id="tree">
|
|
|
14 <ul>
|
|
|
15 <li>Node 01
|
|
|
16 <ul>
|
|
|
17 <li>Node</li>
|
|
|
18 <li>Node</li>
|
|
|
19 </ul>
|
|
|
20 </li>
|
|
|
21 <li>Node 02</li>
|
|
|
22 <li data-jstree='{"opened" : true}'>Node 03
|
|
|
23 <ul>
|
|
|
24 <li>Node</li>
|
|
|
25 <li>Node</li>
|
|
|
26 </ul>
|
|
|
27 </li>
|
|
|
28 <li>Node 04</li>
|
|
|
29 <li>Node 05</li>
|
|
|
30 </ul>
|
|
|
31 </div>
|
|
|
32 <div class="tree" id="full"><ul><li data-jstree='{ "selected" : true, "type" : "file" }'>full</li><li>asdf</li></ul></div>
|
|
|
33 <div class="tree" id="dark"><ul><li data-jstree='{ "selected" : true, "type" : "file"}'>full</li><li>asdf</li></ul></div>
|
|
|
34
|
|
|
35 <script src="./../../../dist/libs/jquery.js"></script>
|
|
|
36 <script src="./../../../dist/jstree.min.js"></script>
|
|
|
37 <script>
|
|
|
38 $('#empty').jstree();
|
|
|
39 $('#tree, #core').jstree();
|
|
|
40 $('#full').jstree({ plugins : ["checkbox","sort","types","wholerow"], "types" : { "file" : { "icon" : "jstree-file" } } });
|
|
|
41 $('#dark').jstree({ plugins : ["checkbox","sort","types","wholerow"], "core" : { "themes" : { "name" : "default-dark" } }, "types" : { "file" : { "icon" : "jstree-file" } } });
|
|
|
42 </script>
|
|
|
43 </body>
|
|
|
44 </html> |
