Fancytree：实现 bootstrap 皮肤

Question

我目前有一个使用 Windows 7 皮肤 css 的工作 fancytree，但我的应用程序的其余部分基于 Bootstrap 样式。我在为 Fancytree 实现 bootstrap 皮肤时遇到了问题。当我这样做时（通过用 Bootstrap css 文件替换我的 win7 css 文件）我的 fancytree 可以工作，但它没有显示文件夹、复选框等的图标。它完全是空白的 space.同样的事情发生在其他独立于图标的 .gif 图像的皮肤上（bootstrap-n 和很棒）

我该如何实施这些皮肤？我错过了什么吗？

如果重要的话，我正在使用 extensions: ["contextMenu", "dnd", "edit"]

编辑：经过进一步测试，我开始注意到，当我刷新页面以查看是否有任何更改生效时，我会在加载前一瞬间在我的树上看到一个图标。我成功截屏了，但我不认为它是 bootstrap 图标。

也许它错位了？另外，什么会导致它消失？它的行为方式让我认为它被 background: none 或类似的东西覆盖，但是图标显示的 <span> 的 class 是 fancytree-icon，并且class 唯一可用的 css 在我的引导皮肤的 css 文件中，我没有看到那里发生任何覆盖。

Answer 1

从相关文件中复制图标 classes 并将其粘贴到 css 文件的底部，并将图像文件包含在您在项目中使用的相关文件夹中

请检查 google chrome 控制台中的图标路径，您会发现缺少某些内容。如果图标图像或字体图标没有丢失..这意味着某种类型的 css 背景 none 或透明 class 正在覆盖您的 css 背景工作文件

Answer 2

为了使用 bootstrap、font-awesome 和其他基于字形的主题，您还应该包含 ext-glyph 扩展名。

这里的例子： http://wwwendt.de/tech/fancytree/demo/index.html#sample-ext-bootstrap.html

Answer 3

我遇到了类似的问题。

查看 example 中的调用。显然，您需要为字形提供地图才能工作。这是对我有用的，使用 font-awesome。

  <script type="text/javascript">
    $j(function(){
        // Initialize Fancytree
        $j("#tree").fancytree({
            extensions: ["glyph"],
            checkbox: true,
            selectMode: 3,
            glyph: {
                map: {
                    doc: "fa fa-file-o",
                    docOpen: "fa fa-file-o",
                    checkbox: "fa fa-square-o",
                    checkboxSelected: "fa fa-check-square-o",
                    checkboxUnknown: "fa fa-square",
                    dragHelper: "fa arrow-right",
                    dropMarker: "fa long-arrow-right",
                    error: "fa fa-warning",
                    expanderClosed: "fa fa-caret-right",
                    expanderLazy: "fa fa-angle-right",
                    expanderOpen: "fa fa-caret-down",
                    folder: "fa fa-folder-o",
                    folderOpen: "fa fa-folder-open-o",
                    loading: "fa fa-spinner fa-pulse"
                }
            },
            source: { url: "/tree.json", cache: true },
            lazyLoad: function(event, ctx) {
                ctx.result = {url: "ajax-sub2.json", debugDelay: 1000};
            }
        });
    });
  </script>

要使用字形图标，请交换此地图：

    map: {
        doc: "glyphicon glyphicon-file",
        docOpen: "glyphicon glyphicon-file",
        checkbox: "glyphicon glyphicon-unchecked",
        checkboxSelected: "glyphicon glyphicon-check",
        checkboxUnknown: "glyphicon glyphicon-share",
        dragHelper: "glyphicon glyphicon-play",
        dropMarker: "glyphicon glyphicon-arrow-right",
        error: "glyphicon glyphicon-warning-sign",
        expanderClosed: "glyphicon glyphicon-plus-sign",
        expanderLazy: "glyphicon glyphicon-plus-sign",  // glyphicon-expand
        expanderOpen: "glyphicon glyphicon-minus-sign",  // glyphicon-collapse-down
        folder: "glyphicon glyphicon-folder-close",
        folderOpen: "glyphicon glyphicon-folder-open",
        loading: "glyphicon glyphicon-refresh"
    }

Fancytree：实现 bootstrap 皮肤

Fancytree: implementing bootstrap skin

jquery

css

twitter-bootstrap

plugins

fancytree