Evince - Responsive Admin Dashboard Template

JS

In order to use this plugin on your page you will need to include the following script in the page.


<script src="plugins/jstree/jstree.min.js"></script>
<script src="js/pages/ui-tree-view.js"></script>

CSS

In order to use this plugin on your page you will need to include the following css in the page.


<link rel="stylesheet" href="plugins/jstree/themes/default/style.css" />

Basic Tree

Root node
- Custom icon
- Child node
Root node
- Root node
  - Child node
  - Opened
    - Selected
    - Child node
- Opened
  - File type
  - File type
- Custom icon
File type


<div id="basicTree">
    <ul>
        <li>Root node
            <ul>
                <li data-jstree='{"icon":"fa fa-warning icon-state-danger icon-md"}'>Custom icon</li>
                <li data-jstree='{"type":"file"}'>Child node</li>
            </ul>
        </li>
        <li>Root node
            <ul>
                <li data-jstree='{"opened":true}'>Root node
                    <ul>
                        <li data-jstree='{"type":"file"}'>Child node</li>
                        <li data-jstree='{"opened":true}'>Opened
                            <ul>
                                <li data-jstree='{"selected":true,"type":"file"}'>Selected</li>
                                <li data-jstree='{"type":"file"}'>Child node</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li data-jstree='{"opened":true}'>Opened
                    <ul>
                        <li data-jstree='{"type":"file"}'>File type</li>
                        <li data-jstree='{"type":"file"}'>File type</li>
                    </ul>
                </li>
                <li data-jstree='{"icon":"fa fa-tags icon-state-danger icon-md"}'>Custom icon</li>
            </ul>
        </li>
        <li data-jstree='{"type":"file"}'>File type</li>
    </ul>
</div>

Drag & Drop

Root node
- Custom icon
- Child node
Root node
- Root node
  - Child node
  - Opened
    - Selected
    - Child node
- Opened
  - File type
  - File type
- Custom icon
File type


<div id="dragTree">
    <ul>
        <li>Root node
            <ul>
                <li data-jstree='{"icon":"fa fa-warning icon-state-danger icon-md"}'>Custom icon</li>
                <li data-jstree='{"type":"file"}'>Child node</li>
            </ul>
        </li>
        <li>Root node
            <ul>
                <li data-jstree='{"opened":true}'>Root node
                    <ul>
                        <li data-jstree='{"type":"file"}'>Child node</li>
                        <li data-jstree='{"opened":true}'>Opened
                            <ul>
                                <li data-jstree='{"selected":true,"type":"file"}'>Selected</li>
                                <li data-jstree='{"type":"file"}'>Child node</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li data-jstree='{"opened":true}'>Opened
                    <ul>
                        <li data-jstree='{"type":"file"}'>File type</li>
                        <li data-jstree='{"type":"file"}'>File type</li>
                    </ul>
                </li>
                <li data-jstree='{"icon":"fa fa-tags icon-state-danger icon-md"}'>Custom icon</li>
            </ul>
        </li>
        <li data-jstree='{"type":"file"}'>File type</li>
    </ul>
</div>

Checkbox Tree

Root node
- Custom icon
- Child node
Root node
- Root node
  - Child node
  - Opened
    - Selected
    - Child node
- Opened
  - File type
  - File type
- Custom icon
File type


<div id="checkTree">
    <ul>
        <li>Root node
            <ul>
                <li data-jstree='{"icon":"fa fa-warning icon-state-danger icon-md"}'>Custom icon</li>
                <li data-jstree='{"type":"file"}'>Child node</li>
            </ul>
        </li>
        <li>Root node
            <ul>
                <li data-jstree='{"opened":true}'>Root node
                    <ul>
                        <li data-jstree='{"type":"file"}'>Child node</li>
                        <li data-jstree='{"opened":true}'>Opened
                            <ul>
                                <li data-jstree='{"selected":true,"type":"file"}'>Selected</li>
                                <li data-jstree='{"type":"file"}'>Child node</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li data-jstree='{"opened":true}'>Opened
                    <ul>
                        <li data-jstree='{"type":"file"}'>File type</li>
                        <li data-jstree='{"type":"file"}'>File type</li>
                    </ul>
                </li>
                <li data-jstree='{"icon":"fa fa-tags icon-state-danger icon-md"}'>Custom icon</li>
            </ul>
        </li>
        <li data-jstree='{"type":"file"}'>File type</li>
    </ul>
</div>

Ajax

Root node
- Custom icon
- Child node
Root node
- Root node
  - Child node
  - Opened
    - Selected
    - Child node
- Opened
  - File type
  - File type
- Custom icon
File type


<div id="ajaxTree">
    <ul>
        <li>Root node
            <ul>
                <li data-jstree='{"icon":"fa fa-warning icon-state-danger icon-md"}'>Custom icon</li>
                <li data-jstree='{"type":"file"}'>Child node</li>
            </ul>
        </li>
        <li>Root node
            <ul>
                <li data-jstree='{"opened":true}'>Root node
                    <ul>
                        <li data-jstree='{"type":"file"}'>Child node</li>
                        <li data-jstree='{"opened":true}'>Opened
                            <ul>
                                <li data-jstree='{"selected":true,"type":"file"}'>Selected</li>
                                <li data-jstree='{"type":"file"}'>Child node</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li data-jstree='{"opened":true}'>Opened
                    <ul>
                        <li data-jstree='{"type":"file"}'>File type</li>
                        <li data-jstree='{"type":"file"}'>File type</li>
                    </ul>
                </li>
                <li data-jstree='{"icon":"fa fa-tags icon-state-danger icon-md"}'>Custom icon</li>
            </ul>
        </li>
        <li data-jstree='{"type":"file"}'>File type</li>
    </ul>
</div>

Recent

Older •••

General Settings

Notifications
Activity log
Automatic updates
Allow backups

Account Settings

Chat
Incognito mode
Public profile

02/03/2019 5:58PM

Hello

Hello!

03/02/2019 5:18AM

lorem

ipsum dolor sit amet