gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 10:26:11 26 4
gpt4 key购买 nike

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

我从 FancyTree 的 GitHub 存储库中拼凑了我的 FancyTree 源代码,我的源文件夹如下所示。这是来自精心挑选的来源,因为 FancyTree 的 dist 文件夹有点稀疏:

enter image description here

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

<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 样式图标。我没有指定任何自定义图标,但预期的默认值。如果我能让自定义图标正常工作,那么我真正担心的是缺少连接线。

打破:如果我强制连接器根据此显示 this SO answer ,通过在树启动后立即添加一个类:

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

我到处都是连接器的垂直部分,但在水平方向上看不到任何东西。,只是文本,通常缩进很远,而且比带线的树更难读。

最佳答案

图标没有显示是因为你尝试使用 bootstrap 皮肤但是你没有加载 bootstrap css

在皮肤 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: ...,
.
.
.
});

参见 Bootstrap 主题 example来自 Fancytree 示例浏览器

看到这个 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");

在此 example 中查看支持连接器的主题来自 Fancytree 示例浏览器

查看此 simplified example (win8 主题和连接器)

关于jquery - jQuery FancyTree 没有可见的连接器或图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46512702/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com