ExtGlyph

About Fancytree glyph extension.

• Status: beta
• Examples: bootstrap and font awesome

Use glyph fonts as instead of icon sprites.

Options

• map, type: {object}, default: Font Awesome 3.2 symbols
  Map of icon class names for different symbol types.

Events

(n.a.)

Methods

(n.a.)

Example

In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.glyph.js.

Then add the glyph css, like bootstrap.min.css, font-awesome.min.css, or similar.

It is also important to use a Fancytree theme that is optimized for glyph icons instead of gif sprites, for example skin-awesome or skin-bootstrap:

  <link href="../src/skin-bootstrap/ui.fancytree.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

  <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.glyph.js" type="text/javascript"></script>

$("#tree").fancytree({
  extensions: ["glyph"],
  glyph: {
    map: {
      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",
      expanderOpen: "glyphicon glyphicon-minus-sign",
      // Default node icons.
      // (Use tree.options.iconClass callback to define custom icons based on node data)
      doc: "glyphicon glyphicon-file",
      docOpen: "glyphicon glyphicon-file",
      folder: "glyphicon glyphicon-folder-close",
      folderOpen: "glyphicon glyphicon-folder-open",
      loading: "glyphicon glyphicon-refresh"
    }
  },
  ...
});

The bootstrap theme also plays well with the ext-wide extension.

Example glyph mappings:

Bootstap

Include the glyph css, use the skin-bootstrap theme, and define the icon mapping:

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" type="text/javascript"></script>
  <link href="../src/skin-bootstrap/ui.fancytree.css" rel="stylesheet" type="text/css">

Icon overview

  map: {
    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",
    expanderOpen: "glyphicon glyphicon-minus-sign",
    // Default node icons.
    // (Use tree.options.iconClass callback to define custom icons based on node data)
    doc: "glyphicon glyphicon-file",
    docOpen: "glyphicon glyphicon-file",
    folder: "glyphicon glyphicon-folder-close",
    folderOpen: "glyphicon glyphicon-folder-open",
    loading: "glyphicon glyphicon-refresh"
  }

Font Awesome 4.3

Include the glyph css, use the skin-bootstrap theme, and define the icon mapping:

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" >
  <link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet" type="text/css">

Icon overview

  map: {
    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",
    // Default node icons.
    // (Use tree.options.iconClass callback to define custom icons based on node data)
    doc: "fa fa-file-o",
    docOpen: "fa fa-file-o",
    folder: "fa fa-folder-o",
    folderOpen: "fa fa-folder-open-o",
    loading: "fa fa-spinner fa-pulse"
  }

Font Awesome 3.2

Include the glyph css, use the skin-bootstrap theme, and define the icon mapping:

  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet" type="text/css">

Icon overview

  map: {
    checkbox: "icon-check-empty",
    checkboxSelected: "icon-check",
    checkboxUnknown: "icon-check icon-muted",
    dragHelper: "icon-caret-right",
    dropMarker: "icon-caret-right",
    error: "icon-exclamation-sign",
    expanderClosed: "icon-caret-right",
    expanderLazy: "icon-angle-right",
    expanderOpen: "icon-caret-down",
    noExpander: "",
    // Default node icons.
    // (Use tree.options.iconClass callback to define custom icons based on node data)
    doc: "icon-file-alt",
    docOpen: "icon-file-alt",
    folder: "icon-folder-close-alt",
    folderOpen: "icon-folder-open-alt",
    loading: "icon-refresh icon-spin"
  }

Recipes

[Howto] Define custom icons per node type

Use the iconClass callback to define per-node custom icons:

$("#tree").fancytree({
  ...
  iconClass: function(event, data){
    if( data.node.isFolder() ) {
      return "glyphicon glyphicon-book";
    }
  },

Another approach is to override the icon class directly with the node data:

[
  {"title": "Node 1", "key": "1", "iconclass": "glyphicon glyphicon-book" },
  ...