What is jsTree Bootstrap Theme?

jsTree Bootstrap Theme is created as a part of Proton UI Responsive Admin Panel Theme.

Since there aren't many jsTree 3 themes out there, we thought we'd make this one freely available. Enjoy!

Download from Github: https://github.com/orangehill/jstree-bootstrap-theme

Responsiveness

jsTree Bootstrap Theme is responsive. To see the effect go ahead and scale a browser window down until the window width is less then 768 pixels. Mobile friendly design should make it easier to tap nodes with more precision

  • Root node (basic)
    • initially selected
    • custom icon URL
    • initially open
      • Another node
    • Custom icon class (bootstrap)
    • Custom icon class (font-awesome)
  • Root node 2
// An example of simple responsive jsTree
    $('#jstree-proton-1').jstree({
        'core': {
            'themes': {
                'name': 'proton',
                'responsive': true
            }
        }
    });
    
  • Root node (wholerow mode)
    • initially selected
    • custom icon URL
    • initially open
      • Another node
    • Custom icon class (bootstrap)
    • Custom icon class (font-awesome)
  • Root node 2
// An example of responsive jsTree with wholerow plugin.
    $('#jstree-proton-2').jstree({
        'plugins': ["wholerow"],
        'core': {
            'themes': {
                'name': 'proton',
                'responsive': true
            }
        }
    });
    
// An example of responsive jsTree with wholerow and checbox plugins.
    $('#jstree-proton-3').jstree({
        'plugins': ["wholerow", "checkbox"],
        'core': {
            'data': [{
                    "text": "Wholerow with checkboxes",
                    "children": [{
                        "text": "initially selected",
                        "state": {
                            "selected": true
                        }
                    }, {
                        "text": "custom icon URL",
                        "icon": "./assets/images/tree_icon.png"
                    }, {
                        "text": "initially open",
                        "state": {
                            "opened": true
                        },
                        "children": ["Another node"]
                    }, {
                        "text": "custom icon class",
                        "icon": "glyphicon glyphicon-leaf"
                    }, {
                        "text": "fontawesome icon class",
                        "icon": "fa fa-pagelines"
                    }]
                },
                "And wholerow selection"
            ],
            'themes': {
                'name': 'proton',
                'responsive': true
            }
        }
    });