File-Explorer/index.html at master · WebIDEorg/File-Explorer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>

<head>
    <title>WebIDE File Explorer</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
        $(function() {
            $('#jstree').jstree();
            $('#jstree').on("changed.jstree", function(e, data) {
                console.log(data.selected);
            });
            $('button').on('click', function() {
                $('#jstree').jstree(true).select_node('child_node_1');
                $('#jstree').jstree('select_node', 'child_node_1');
                $.jstree.reference('#jstree').select_node('child_node_1');
            });
        });
    </script>
    <style>
        h1 {
            color: aqua;
        }

        .explorer.exe {
            width: 100%;
            border: 2px groove;
        }
    </style>
</head>

<body>
    <center>
        <h1>WebIDE - File Explorer</h1>
    </center>
    <hr>
    <div id="explorer.exe">
        <div style="width:100%;height:25px;background-color:rgb(85, 255, 255);border:2px groove;">
            <img style="height:100%;width:100%;" src="Assets/bar.png">
        </div>
        <div style="width:100%;height:100%;border:2px groove;">
            <div id="jstree" style="width:20%;height:25px;border:2px groove;">
                <ul>
                    <li>Root
                        <ul>
                            <li id="child_node_1">Child node 1</li>
                            <li>Child node 2</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div style="width:80%;height:25px;border:2px groove;margin-left:20%;">
                filebox
            </div>
        </div>
    </div>
</body>
<html>