javascript JsTree：使用“类型”插件更改文件夹的“打开”图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8213832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JsTree: changing the "open" icon for folders using the "types" plugin
提问by Captain Sensible
It's easy to specify what the icon should be for a closed folder using the "types" plugin. But can the types plugin also be used to specify what an openfolder should look like, or can I only do this with CSS (like below) ?
使用“types”插件很容易为关闭的文件夹指定图标。但是 types 插件是否也可以用于指定打开的文件夹应该是什么样子，或者我只能用 CSS 来做到这一点（如下所示）？
li.jstree-open > a .jstree-icon
{
background:url("folder_open.png") 0px 0px no-repeat !important;
}
回答by Li-aung Yip
A possible solution is to have two types - one for an open folder, and one for a closed folder. Changing the node typeis easy.
一个可能的解决方案是有两个types - 一个用于打开文件夹，一个用于关闭文件夹。更改节点type很容易。
From another answer of mine:
来自我的另一个回答：
<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>
回答by jeev
@Seventh element:
@第七元素：
Your code in the question itself is the answer.It works pretty fine. 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; }
Cheers
干杯
回答by Zin Min
If you guys want to use jQuery and bootstrap icon, here is my solution.
如果你们想使用 jQuery 和 bootstrap 图标，这是我的解决方案。
[Note: I use glyphicon-folder-open bootstrap icon for folder open and glyphicon-folder-close bootstrap icon for folder close.]
[注意：我使用 glyphicon-folder-open bootstrap 图标打开文件夹，使用 glyphicon-folder-close bootstrap 图标关闭文件夹。]
// 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 are using font-awesome:
或者如果您使用的是 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');
});
回答by Zin Min
回答by Radek
Looks like you need to use css
看起来你需要使用 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 info in the jsTree forum
jsTree 论坛中的更多信息
