Fancytree: реализация bootstrap skin

Question

У меня в настоящее время работает fancytree, который использует скин для Windows 7 css, но остальная часть моего приложения основана на стиле Bootstrap. У меня возникли проблемы с реализацией загрузочного скина Fancytree. Когда я делаю (заменяя свой файл win7 css загрузочным файлом Bootstrap css), мой fancytree работает, но он не содержит значков для папок, флажков и т. Д. Это совершенно пустое пространство. То же самое происходит и для других скинов, которые не зависят от изображения .gif для значков (bootstrap-n и awesome)

Как я могу реализовать эти скины? Я что-то упускаю?

Если это имеет значение вообще, я использую extensions: ["contextMenu", "dnd", "edit"]

Edit: После дальнейших испытаний я начал замечать, что когда я обновить мою страницу, чтобы увидеть, если какие-либо изменения вступили в силу, я вижу значок на моем дереве какого-то разделить секунду до его загрузки. Мне удалось сделать снимок экрана, но я не думаю, что это значок начальной загрузки.

Может быть, это перекос? Кроме того, что может заставить его исчезнуть? То, как он себя ведет, заставляет меня думать, что он переопределен background: none или что-то вроде этого, но класс <span>, который отображается в этом значке, это fancytree-icon, и только css, доступный для этого класса, находится в файле css для загрузочного скина, и Я не вижу никаких серьезных изменений.

Answer 1

Чтобы использовать загрузочные, шрифтовые и другие глиф-темы , вы должны также включить расширение ext-glyph.

Пример здесь: http://wwwendt.de/tech/fancytree/demo/index.html#sample-ext-bootstrap.html

Answer 2

скопировать классы иконки из соответствующего файла и вставить его в нижнюю часть файла CSS, а также включать в себя графические файлы в соответствующей папке вы используете в проекте

пожалуйста, проверьте ваши пути значок в Google Chrome консоли вы найдете что-то пропал, отсутствует. если значки изображений или шрифтов не исчезли .. это означает, что какой-то тип css-фона отсутствует или прозрачный класс переопределяется на вашем css для фонового рабочего файла

Answer 3

У меня была аналогичная проблема.

Посмотрите на вызов в example. По-видимому, вам нужно предоставить карту для работы глифа. Вот что сработало для меня, используя шрифт - потрясающий.

<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" 
    }