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.

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

  <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(node) 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(node) 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(node) 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(node) 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] ...