The theme plugin of jstree determines the view of jstree. Without loading any theme, you will get a fully functional tree and it will look like an ordinary unordered list. You can define every bits of styling of jstree in css file and use that as a theme. You can change the background colour, style of dotted line, icons, fonts, colours etc.
There are many more nice articles on jstree at right hand side bar for you.
There could be two types of requirements for custom jsTree css styling or jstree theme as below:
1. Keep the default theme with minor styling changes.
2. Complete change in look or view of jstree.
For first case, you can achieve this by overriding existing classes that are required. For an example you can see how the background colour of jstree has been changed by simply changing couple of existing CSS class.
Now for the second case, you can prepare a complete style.css as per the existing classes and place
You can set the theme folder using $.jstree._themes = "PATH/TO/FOLDER/" if not using the default location.
As an example, we’ll be taking two existing themes “default” and “default-dark”. We’ll load default-dark theme while loading the tree.
The outcome of this custom jsTree css styling or jstree theme will look like:
You can also change the theme run time using set_theme api. For explaining this, in the same example, we’ll have a button called “change theme” which is change the theme. You might not require this so you can discard this part. With default theme, the same tree will look like below:
If you do not mention which theme to load, by default it will use “default” theme. Off course, css files need to be added into the code. So for default-dark theme by default, you need to mention it in jstree configuration and add “theme” plugin. Also, do not forget to add the css files.
In jstree configuration
$('#SimpleJSTree').jstree({
"core": {
'data': jsondata,
'themes' : {
'name' : "default-dark",
'dots': true,
'icons': true
}
},
"plugins" : ["themes"]
});
The complete working example of custom jsTree css styling or jstree theme is below.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>custom jsTree css styling | jstree theme</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default-dark/style.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
<script type="text/javascript">
$(function () {
var jsondata = [
{ "id": "ajson1", "parent": "#", "text": "Simple root node"},
{ "id": "ajson2", "parent": "#", "text": "Root node 2"},
{ "id": "ajson3", "parent": "ajson2", "text": "Child 1"},
{ "id": "ajson4", "parent": "ajson2", "text": "Child 2"},
];
createJSTree(jsondata);
$('#btnChangeTheme').click(function () {
$('#SimpleJSTree').jstree("set_theme","default");
});
});
function createJSTree(jsondata) {
$('#SimpleJSTree').jstree({
"core": {
'data': jsondata,
'themes' : {
'name' : "default-dark",
'dots': true,
'icons': true
}
},
"plugins" : ["themes"]
});
}
</script>
</head>
<body>
<div id="SimpleJSTree"></div>
<br />
<input type="button" id="btnChangeTheme" name="btnChangeTheme" Value="Change Theme">
</body>
</html>
- 3486 reads