-
-
Notifications
You must be signed in to change notification settings - Fork 603
TutorialTheming
About customizing Fancytree appearance.
See also the online sample.
Note: the previous options icons
(with trailing 's'), iconClass
, and
iconclass
have been deprecated since v2.14:
- [Added]
options.icon
option/callback.
Valid values are true, false, a string containing a class name or image url, or a callback returning that. - [Changed]
node.icon
option. Valid values are true, false, or a string containing a class name or image url.
This option existed before, but was stored in thenode.data.icon
namespace, and did not accept class names. - [Deprecated]
options.iconClass
callback: useoptions.icon
instead - [Deprecated]
options.icons
: useoptions.icon
instead - [Deprecated]
node.data.iconclass
option: usenode.icon
instead - [Deprecated]
node.data.icon
option: usenode.icon
instead
There are multiple ways to customize the standard icons or display icons depending on node types or attributes:
-
In order to change the overall look and feel, a new theme could be created as described below.
-
Hide icons altogether
The tree optionicon: false
will hide all icons (except for nodes that have explicitly set the node optionicon: true
). -
Define icons based on initialization data or callbacks
The node initialization dataicon: "icon_path_or_class"
is evaluated by the renderer. In addition, the global tree optionicon
can be used to define defaults or implement a callback that returns custom configuration per node. See details below. -
Define icons at runtime using the API
Theicon
option may also be set at runtime. In this case the node must be rendered again to reflect the change:node.icon = "icon_path_or_class"; node.renderTitle();
-
Override standard CSS with custom rules
For example override the theme's default folder icons with this CSS:
span.fancytree-node.fancytree-folder > span.fancytree-icon { background-position: 0 0; background-image: url("customFolder.gif"); } span.fancytree-node.fancytree-folder.fancytree-expanded > span.fancytree-icon { background-image: url("customFolderOpen.gif"); }
-
Customize node style depending on
extraClasses
This is yet another option, as explained below.
If opts.icon
is a callback function, it will be called like icon(event, data)
.
For example
icon: function(event, data) {
if( data.node.isFolder() ) { return "myCustomClass"; }
},
If the returned value is a boolean or string, this value will be used.
Otherwise, if node.icon
is a boolean or string, this value will be used.
Otherwise, if tree.options.icon
is a boolean or string, this value will be used.
Oterhwise show the standard icon as defined by the theme and depends on the type
(document/folder) and status (expanded/collapsed).
A boolean value can be used to show / hide an icon.
A string value like icon: "icon_path_or_class"
is evaluated like this:
If the icon definition contains a '.' or '/' character, it is considered
to be an image URL and will result in an <img src='...'>
tag:
<span class="fancytree-node">
<span class="fancytree-expander"></span>
<img class="fancytree-icon" src="custom.png"></img>
<span class="fancytree-title">Node 1</span>
</span>
Otherwise a class name is assumed and added to the markup. Also the fancytree-icon
class name is replaced with fancytree-custom-icon
:
<span class="fancytree-node">
<span class="fancytree-expander"></span>
<span class="fancytree-custom-icon myCustomClass"></span>
<span class="fancytree-title">Node 1</span>
</span>
We need to add some custom CSS to assign an image:
span.fancytree-custom-icon.myCustomClass {
background-image: url("customDoc.png");
}
The node.extraClasses
option adds classes to the node markup:
<span class="fancytree-node custom1">
<span class="fancytree-expander"></span>
<span class="fancytree-icon"></span>
<span class="fancytree-title">Node 1</span>
</span>
Note that in contrast to the icon
option, the custom class is added
to the surrounding node-span. This may be preferred if we want to modify title
appearance as well:
span.fancytree-node.custom1 > span.fancytree-icon {
background-position: 0 0;
background-image: url("customDoc2.gif");
}
span.fancytree-node.custom1 > span.fancytree-title {
color: maroon;
font-family: "Audiowide";
}
This can also be done using the API.
Note: While it is possible to add CSS classes to elements directly, this is
not recommended, because those classes would be removed when the node is rendered
the next time.
Instead, classes should be listed in the node.extraClasses
property to make
them sticky. A convenient way to do achieve this, is using special API methods:
node.addClass("custom1");
node.removeClass("custom2");
node.toggleClass("warning", node.data.isCritical);
http://wwwendt.de/tech/fancytree/doc/jsdoc/global.html#FancytreeOptions
#tree.pinCheckboxes span.fancytree-checkbox {
background-position: 0 0;
background-image: url("../app/img/pin_16x16_up.png");
}
#tree.pinCheckboxes span.fancytree-selected span.fancytree-checkbox {
background-image: url("../app/img/pin_16x16_down.png");
}
#tree.pinCheckboxes span.fancytree-checkbox:hover {
background-image: url("../app/img/pin_16x16_up_hover.png");
}
#tree.pinCheckboxes span.fancytree-selected span.fancytree-checkbox:hover {
background-image: url("../app/img/pin_16x16_down_hover.png");
}
<body>
...
<div id="tree" class="pinCheckboxes">
</div>
</body>
Create a custom theme with custom css rules and sprites (icons.gif) in order to change the overall look and feel.
It is recommended to use the Less CSS pre-processor,
create a new theme folder, and add custom ui.fancytree.less
file that includes
skin-common.less
(Of course it is also posible to edit the CSS files directly, but that may be harder to maintain if the standard themses are updated.)
See here for an example: /src/skin-custom-1
Documentation Home - Project Page - Copyright (c) 2008-2022, Martin Wendt (https://wwWendt.de)