ExtThemeroller

About Fancytree themeroller extension.

• Status: beta
• Examples: see here

Add ui-state-* classes to nodes, so jQuery UI ThemeRoller style sheets can be applied.

Options

• activeClass, type: {string}, optional, default: "ui-state-active"
  Class added to active node.
  For example: Set this to "ui-state-highlight", to apply the same color as the selected nodes.

• addClass, type: {string}, optional, default: "ui-corner-all"
  Class added to all nodes. Set to "" to prevent rounded corners.

• focusClass, type: {string}, optional, default: "ui-state-focus"
  Class added to focused node.

• hoverClass, type: {string}, optional, default: "ui-state-hover"
  Class added to active node.

• selectedClass, type: {string}, optional, default: "ui-state-highlight"
  Class added to selected nodes.

Events

(n.a.)

Methods

(n.a.)

Example

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

We also need a style sheet generated by ThemeRoller.

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 rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link href="../src/skin-themeroller/ui.fancytree.css" rel="stylesheet">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script src="../src/jquery.fancytree.js"></script>
  <script src="../src/jquery.fancytree.themeroller.js"></script>

$("#tree").fancytree({
  extensions: ["themeroller"],
  themeroller: {
    activeClass: "ui-state-active",      // Class added to active node
    addClass: "ui-corner-all",           // Class added to all nodes
    focusClass: "ui-state-focus",        // Class added to focused node
    hoverClass: "ui-state-hover",        // Class added to hovered node
    selectedClass: "ui-state-highlight"  // Class added to selected nodes
  },
  ...
});

Recipes

[Howto] Use the new 'base' theme

The new 'base' theme was introduced with jQuery UI 12:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link href="../src/skin-themeroller/ui.fancytree.css" rel="stylesheet">

and optionally adjust the classes:

$("#tree").fancytree({
  extensions: ["themeroller"],
  themeroller: {
    addClass: "",
    selectedClass: "ui-state-active"  // use same color as active node
  },
  ...
},