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

Question

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

我从它的GitHub repo拼凑了我的FancyTree源代码,我的源文件夹如下所示.这是从挑选源代码,因为distFancyTree 的文件夹有点稀疏:

这就是我引用样式和脚本的方式.开发只是为了简洁:

<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:如果我强制连接器根据这个SO答案显示,通过在树启动时添加一个类:

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

我得到了连接器的垂直部分,但在水平方向上看不到任何东西.,只是文本,通常比具有线条的树缩进和可读性差.

Answer 1

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

boostrap.css在skin 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主题示例

请参阅此简化示例

BTW

您可以通过引用它来切换到支持连接器的不同外观:

<!-- <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示例浏览器中查看此示例中支持连接器的主题

看到这个简化的例子(win8主题和连接器)