没有连接器或jQuery FancyTree可见的图标

Question

我正在尝试使用FancyTree jquery插件实现基于Web的文件夹浏览器。经过一些出牙问题，我的工作做得很好。唯一的问题是FancyTree没有显示任何连接线或图标。仅严格文本，分别使用+和 - 图标进行展开和折叠。我曾想象过这样一个面向文件系统的插件，它有例如默认图标。关闭和打开文件夹等，所以我还没有指定自定义图标，但连接线更让我烦恼。

我从我的GitHub repo拼凑了我的FancyTree源代码，我的源文件夹如下所示。这是从挑选源代码，因为FancyTree的dist文件夹有点稀疏：

这是我引用样式和脚本的方式。开发只是为了简洁：

<link rel="stylesheet" href="~/css/site.css" />

<link href="~/lib/fancytree/jquery-ui.css" rel="stylesheet" />
<link href="~/lib/fancytree/jquery-ui.structure.css" rel="stylesheet" />
<link href="~/lib/fancytree/jquery-ui.theme.css" rel="stylesheet" />
<link href="~/lib/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" />

额外的样式来自于jQuery UI的最小自定义下载，这是FancyTree的依赖。脚本：

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/fancytree/jquery-ui.js"></script>
<script src="~/lib/fancytree/jquery.fancytree-all.js"></script>

我只是想象一个丢失或错误的images位置，但肯定这应该使用glyphicons样式图标。我没有指定任何自定义图标，但预期默认值。如果我可以获得自定义图标，那么我真正关心的是缺少连接线。

BREAKING： 如果我强制连接器根据此this SO answer显示，则在树启动后立即添加一个类：

$(".fancytree-container").addClass("fancytree-connectors");

我得到连接器的垂直部分，但水平上没有任何可见的。 ，只是文本，通常比具有线条的树更加缩进和可读性。

Answer 1

图标不会显示，因为你试图使用bootstrap皮肤，但你没有加载bootstrap css

在skin css文件之前添加对boostrap.css的引用：

<link href="~/path/to/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="~/lib/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" />

除此之外，不要忘记在加载时添加这两个设置：

• extensions - 指定您要使用glyph分机号

• glyph - 指定您希望bootstrap3预设

类似的东西：

$("#tree").fancytree({
    extensions: ["glyph"],
    glyph: {
        preset: "bootstrap3"
    },
    checkbox: true,
    source: ...,
    .
    .
    .
});

请参阅Fancytree示例浏览器中的Bootstrap主题example

请参阅 simplified example

<强>顺便说一句

您可以通过引用它来切换到支持连接器的其他外观：

<!-- <link href="~/lib/fancytree/skin-bootstrap/ui.fancytree.css" rel="stylesheet" /> -->
<link href="~/lib/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet" />

使用以下方式设置连接器：

$(".fancytree-container").addClass("fancytree-connectors");

从Fancytree示例浏览器

中查看支持此example中的连接器的主题

请参阅此simplified example（win8主题和连接器）