ExtWide

About Fancytree 'wide' extension.

• Status: experimental
• example
• Requires jQuery UI 1.9+

Stretch the selection bar to 100% of the container width.

This is done by stretching the title <span> accross the left <ul> limit. We then add then a padding-left to the title in order to adjust for level indentation.
Every node span gets a fancytree-level-N class. The required css rules are dynamically generated as <style> tag in the header. A special rule disables the indentation while animations are active, because jQuery inserts temporary position:relative elements, that would break the layout.

NOTE The 'skin-win8-n' and 'skin-bootstrap-n' skins use the node <span> for highlighting, which also results in a wide selection bar, but with a left indentation per level. However these variants don't require - or even work with - the ext-wide plugin.

Options

• iconWidth, type: {string}, optional, default: guess from css (typically "16px")
  Width of one single icon, e.g. '1em' or '32px'. Used to calculate the title indentation.

• iconSpacing, type: {string}, optional, default: guess from css (typically "3px")
  Width of margin between two icons, or right icon and title. Used to calculate the title indentation.

• levelOfs, type: {string}, optional, default: guess from css (typically "16px")
  Indentation per level. Used to calculate the title indentation.

Events

(n.a.)

Methods

(n.a.)

Example

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

  <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>
  <link href="skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css">
  <script src="js/jquery.fancytree.js" type="text/javascript"></script>
  <script src="js/jquery.fancytree.wide.js" type="text/javascript"></script>

$("#tree").fancytree({
  extensions: ["wide"],
  wide: {
  },
  ...
});


# Recipes

##### [Howto] ...