Fancytree：實現引導皮膚

Question

我目前有一個工作fancytree使用Windows 7皮膚的CSS，但我的應用程序的其餘部分是基於Bootstrap風格。我無法爲Fancytree實施自舉皮膚。當我這樣做時（通過用Bootstrap css文件替換我的win7 css文件）我的fancytree工作，但它沒有提供文件夾，複選框等的圖標，它完全是空白的。同樣的事情發生在獨立於圖標的.gif圖像的其他皮膚上（引導-n和真棒）

我該如何去實現這些皮膚？我錯過了什麼嗎？

如果它在所有，我使用extensions: ["contextMenu", "dnd", "edit"]

編輯：在進一步的測試中，我開始注意到，當我刷新我的網頁，以查看是否有任何變化生效，我看到我的樹一個圖標在加載之前劈開一秒。我設法做了一個截圖，但我不認爲它是一個引導程序圖標。

也許這是錯位？另外，什麼會導致它消失？它的行爲方式使我認爲它被background: none或類似的東西覆蓋，但圖標顯示的<span>的類是fancytree-icon，並且該類的唯一可用css位於我的bootrap皮膚的css文件中，並且我沒有看到任何壓倒一切的發生。

Answer 1

爲了使用引導，font-awesome，和其他基於字形的主題，你還應該包括ext-glyph擴展名。

這裏舉例： http://wwwendt.de/tech/fancytree/demo/index.html#sample-ext-bootstrap.html

Answer 2

從相關文件複製圖標類並粘貼到CSS文件的底部，還包括相關的文件夾中的圖像文件使用的是項目

請在谷歌瀏覽器的控制檯你的圖標的路徑，你會發現什麼不見了。如果圖標圖像或字體圖標不會丟失..它意味着一些類型的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" 
    }