FancyTree：通过 HTML 添加自定义图标？答案

【问题标题】：FancyTree: Adding a custom icon by HTML?FancyTree：通过 HTML 添加自定义图标？
【发布时间】：2015-02-17 22:27:55
【问题描述】：

我正在使用 HTML 对文件夹树控件进行基本的 FancyTree 初始化，我想知道是否还可以为这些文件夹指定自定义图标，即，

<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name

在我的 FancyTree 控件的定义中，我指定了一个 imagePath：

$("#tree").fancytree({imagePath: "skin-win8/",

但我看到的只是我的图标应该出现的空白位置，即使我将自定义图标放在 skin-win8 文件夹中。向 FancyTree 控件添加一个或两个自定义图标的最简单方法是什么？如果您想知道的话，我既是 FancyTree 又是 CSS 新手 :)

谢尔顿

【问题讨论】：

【解决方案1】：

对我来说这看起来不错。基本上和这个demo一样：

可能只是您的标记中的一个错字：

<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name

（应该是id="xyz" 而不是id="xyz'）

【讨论】：

嗨，马丁，感谢您的回复。不幸的是，错字仅在我的 sn-p 中，我试图使用一些虚拟值来保护有罪:) 我不知道您是否有任何其他故障排除技巧，但我想调试/验证会更容易如果我在 init 事件处理程序中做到了。如果不出意外，那将使它与您的演示相同...

【解决方案2】：

再次感谢 mar10 为我指明了正确的方向，尽管他认为我的标记中有错字并不是真正的罪魁祸首。但是通过说他没有发现任何问题并将我推荐回他的自定义节点图标演示，这让我想到也许我也遇到了 imagePath 问题，例如this previous custom-node question

所以我回到我的 FancyTree 下载并让自定义节点示例在我的服务器上运行，然后我移动页面及其依赖项，直到我得到与我的情况类似的东西。一旦我完成了这项工作，我就可以在我的实际页面中使用相同的方法...

我碰巧将所有与 FancyTree 相关的文件保存在应用程序的 web 文件夹中名为 fancytree 的目录中，因此我添加了一个名为 custom 的子文件夹strong> 并按以下方式设置我的图像路径：

imagePath: "fancytree/custom/",

完成此操作后，我可以通过将自定义图标包含在节点的 HTML 定义中或将其设置在用于初始化树的某些方面的 Javascript 函数中来使用自定义图标。希望这对其他一些自定义节点新手有所帮助...

谢尔顿

【讨论】：