5
|
1 <!DOCTYPE html>
|
|
2 <html lang="en">
|
|
3 <head>
|
|
4 <meta charset="UTF-8">
|
|
5 <title>Mobile 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="tree">
|
|
12 <ul>
|
|
13 <li>Node 01
|
|
14 <ul>
|
|
15 <li>Node</li>
|
|
16 <li>Node</li>
|
|
17 </ul>
|
|
18 </li>
|
|
19 <li>Node 02</li>
|
|
20 <li data-jstree='{"opened" : true}'>Node 03
|
|
21 <ul>
|
|
22 <li>Node</li>
|
|
23 <li>Node</li>
|
|
24 </ul>
|
|
25 </li>
|
|
26 <li>Node 04</li>
|
|
27 <li>Node 05</li>
|
|
28 </ul>
|
|
29 </div>
|
|
30 <div class="tree" id="full"><ul><li data-jstree='{ "selected" : true, "type" : "file" }'>full</li><li>asdf</li></ul></div>
|
|
31 <div class="tree" id="dark"><ul><li data-jstree='{ "selected" : true, "type" : "file"}'>full</li><li>asdf</li></ul></div>
|
|
32
|
|
33 <script src="./../../../dist/libs/jquery.js"></script>
|
|
34 <script src="./../../../dist/jstree.min.js"></script>
|
|
35 <script>
|
|
36 $.jstree.defaults.core.themes.responsive = true;
|
|
37 $('#tree').jstree();
|
|
38 $('#full').jstree({ plugins : ["checkbox","sort","types","wholerow"], "types" : { "file" : { "icon" : "jstree-file" } } });
|
|
39 $('#dark').jstree({ plugins : ["checkbox","sort","types","wholerow"], "core" : { "themes" : { "name" : "default-dark" } }, "types" : { "file" : { "icon" : "jstree-file" } } });
|
|
40 </script>
|
|
41 </body>
|
|
42 </html> |