如何将图标放在 jsTree 树的顶部
how to put an icon on top of jsTree tree
所以我有一棵 jsTree 树,我希望我可以放一个像这样的 'lone star' 类型的图标...
在树的最顶端:
jsTree 是 jquery 插件,提供交互式树。它完全免费、开源并在 MIT 许可证下分发。 jsTree 易于扩展、主题化和配置,它支持 HTML & JSON 数据源和 AJAX 加载。
jsTree 在任一框模型(内容框或边框框)中都能正常运行,可以作为 AMD 模块加载,并且具有用于响应式设计的内置移动主题,可以轻松定制。它使用 jQuery 的事件系统,因此在树中绑定各种事件的回调很熟悉也很容易。
只需在容器上方添加一个div,如下所示:
<div>
<img src="star.png">
</div>
<div id="container" role="main" style="height: 430px;">
<div id="tree" class="jstree jstree-1 jstree-default jstree-default-small" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="/" aria-busy="false" style="height: 430px;">
<ul class="jstree-container-ul jstree-children jstree-striped" role="group">
<li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="/_anchor" aria-disabled="true" aria-expanded="true" id="/" class="jstree-node jstree-open jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor jstree-disabled" href="#" tabindex="-1" id="/_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>root</a>
<ul role="group"
class="jstree-children">
<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="MENU1_anchor" aria-expanded="false" id="MENU1" class="jstree-node jstree-closed"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="MENU1_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>MENU1</a>
</li>
<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="MENU2_anchor" aria-expanded="false" id="MENU2" class="jstree-node jstree-closed jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="MENU2_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>MENU2</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="data" style="height: 430px;">
<div class="content code" style="display: none; height: 430px;">
<textarea id="code" readonly="readonly"></textarea>
</div>
<div class="content folder" style="display: none; height: 430px;"></div>
<div class="content image" style="display: none; position: relative; height: 430px;">
<img src="" alt="" style="display:block; position:absolute; left:50%; top:50%; padding:0; max-height:90%; max-width:90%;">
</div>
<div class="content default" style="text-align: center; height: 430px; line-height: 430px;">Select a file from the tree.</div>
</div>
</div>
我没有star.png,但看起来像这样
所以我有一棵 jsTree 树,我希望我可以放一个像这样的 'lone star' 类型的图标...
在树的最顶端:
jsTree 是 jquery 插件,提供交互式树。它完全免费、开源并在 MIT 许可证下分发。 jsTree 易于扩展、主题化和配置,它支持 HTML & JSON 数据源和 AJAX 加载。
jsTree 在任一框模型(内容框或边框框)中都能正常运行,可以作为 AMD 模块加载,并且具有用于响应式设计的内置移动主题,可以轻松定制。它使用 jQuery 的事件系统,因此在树中绑定各种事件的回调很熟悉也很容易。
只需在容器上方添加一个div,如下所示:
<div>
<img src="star.png">
</div>
<div id="container" role="main" style="height: 430px;">
<div id="tree" class="jstree jstree-1 jstree-default jstree-default-small" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="/" aria-busy="false" style="height: 430px;">
<ul class="jstree-container-ul jstree-children jstree-striped" role="group">
<li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="/_anchor" aria-disabled="true" aria-expanded="true" id="/" class="jstree-node jstree-open jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor jstree-disabled" href="#" tabindex="-1" id="/_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>root</a>
<ul role="group"
class="jstree-children">
<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="MENU1_anchor" aria-expanded="false" id="MENU1" class="jstree-node jstree-closed"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="MENU1_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>MENU1</a>
</li>
<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="MENU2_anchor" aria-expanded="false" id="MENU2" class="jstree-node jstree-closed jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="MENU2_anchor"><i class="jstree-icon jstree-themeicon folder jstree-themeicon-custom" role="presentation"></i>MENU2</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="data" style="height: 430px;">
<div class="content code" style="display: none; height: 430px;">
<textarea id="code" readonly="readonly"></textarea>
</div>
<div class="content folder" style="display: none; height: 430px;"></div>
<div class="content image" style="display: none; position: relative; height: 430px;">
<img src="" alt="" style="display:block; position:absolute; left:50%; top:50%; padding:0; max-height:90%; max-width:90%;">
</div>
<div class="content default" style="text-align: center; height: 430px; line-height: 430px;">Select a file from the tree.</div>
</div>
</div>
我没有star.png,但看起来像这样