Question

我目前有一个使用Windows 7皮肤css的工作fancytree，但我的应用程序的其余部分基于Bootstrap样式。我在为Fancytree实现bootstrap皮肤时遇到了麻烦。当我这样做时（通过用Bootstrap css文件替换我的win7 css文件）我的fancytree可以工作，但它没有提供文件夹，复选框等的图标。它完全是空白区域。对于与图标的.gif图像无关的其他皮肤也会发生同样的事情（bootstrap-n和awesome）

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

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

编辑：经过进一步的测试后，我开始注意到当我刷新页面以查看是否有任何更改生效时，我会在加载之前在树上看到一个图标。我设法截取屏幕截图，但我不认为它是一个引导图标。

enter image description here

也许它未对齐？还有什么可以导致它消失？它的行为方式让我认为它被background: none或类似的东西覆盖了，但图标显示的<span>的类是fancytree-icon，并且唯一可用于该课程的css是在我的bootrap skin的css文件中，我没有看到那里发生的任何重大事件。

Answer 1

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

此处示例： http://wwwendt.de/tech/fancytree/demo/index.html#sample-ext-bootstrap.html

Answer 2

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

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

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>

要使用glyphicons，请在此地图中交换：

    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：实现引导皮肤

3 个答案: