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
}
}
});