JsTree: changing the "open" icon for folders using the types plugin

Question

It is easy to specify which icon should be for a private folder using the "types" plugin. But can the plugin type also be used to indicate what the open folder should look like, or can I only do this with CSS (like below)?

li.jstree-open > a .jstree-icon { background:url("folder_open.png") 0px 0px no-repeat !important; } 

Answer 1

@ Seventh item:

Your code in the question itself is the answer. It works very well. For open node use

 li.jstree-open > a .jstree-icon { background:url("/images/favorites.png") 0px 0px no-repeat !important; } 

For closed nodes use

 li.jstree-closed > a .jstree-icon { background:url("/images/favorites.png") 0px 0px no-repeat !important; } 

Greetings

Answer 2

If you guys want to use the jQuery and bootstrap icon, here is my solution.

[Note. I use the open bootstrap icon with the closed folder to open the folder and the close-up icon to close the folder.]

 // bind customize icon change function in jsTree open_node event. $('#your-jstree').on('open_node.jstree', function(e, data){ $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first() .removeClass('glyphicon-folder-close').addClass('glyphicon-folder-open'); }); // bind customize icon change function in jsTree close_node event. $('#your-jstree').on('close_node.jstree', function(e, data){ $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first() .removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close'); }); 

or if you use font-awesome:

 // bind customize icon change function in jsTree open_node event. $('#jstree').on('open_node.jstree', function(e, data){ var icon = $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first(); icon.removeClass('fa-folder').addClass('fa-folder-open'); }); // bind customize icon change function in jsTree close_node event. $('#jstree').on('close_node.jstree', function(e, data){ var icon = $('#' + data.node.id).find('i.jstree-icon.jstree-themeicon').first(); icon.removeClass('fa-folder-open').addClass('fa-folder'); }); 

Answer 3

A possible solution is to have two type - one for the open folder and one for the private folder. Changing the node type very simple.

From my other answer :

 <div id="jstree_menu"></div> <script> /* Load menu tree data */ $('#jstree_menu').jstree( { 'core' : { 'data' : { 'url' : '/jstree-menu-data/index.html', } }, 'plugins' : [ "types" ], 'types' : { 'default' : { 'icon' : 'fa fa-angle-right fa-fw' }, 'f-open' : { 'icon' : 'fa fa-folder-open fa-fw' }, 'f-closed' : { 'icon' : 'fa fa-folder fa-fw' } } } ); /* Toggle between folder open and folder closed */ $("#jstree_menu").on('open_node.jstree', function (event, data) { data.instance.set_type(data.node,'f-open'); }); $("#jstree_menu").on('close_node.jstree', function (event, data) { data.instance.set_type(data.node,'f-closed'); }); </script> 

Answer 4

It looks like you need to use css

 li.jstree-open[rel=TYPE]{ background:url("openimage.gif") 0px 0px no-repeat !important; } li.jstree-closed[rel=TYPE]{ background:url("closedimage.gif") 0px 0px no-repeat !important; } li.jstree-leaf[rel=TYPE]{ background:url("leafimage.gif") 0px 0px no-repeat !important; } 

more information in the jsTree forum

Answer 5

There is currently a function called "set_icon" (see the API ) that allows you to set the Favorites icon, starting with a path string or class name.

 $.jstree.reference('#jstree').set_icon(node, "/assets/contextMenu_icons/folderOpened.png")