Skip to content

TutorialTheming

Jump to bottom Edit New page
Martin@MBP edited this page Oct 3, 2015 · 18 revisions

About initializing Fancytree and implementing lazy loading.

See also the online sample.

Recipes

[Howto] Customize node style depending on extraClasses

The extraClasses attribute can be passed with the initialization data or set by an API call:

node.extraClasses = "custom1";
// node.data.icon = "customDoc1.gif";
node.renderTitle();

Custom CSS rules may then be used to tweak the node

span.fancytree-node.custom1 > span.fancytree-title {
	color: maroon;
	font-family: "Audiowide";
}
span.fancytree-node.custom1 > span.fancytree-icon {
	background-image: url("skin-custom/customDoc2.gif");
	background-position: 0 0;
}

[Howto] Change the checkbox icons

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>

Documentation Home - Project Page - Copyright (c) 2008-2022, Martin Wendt (https://wwWendt.de)

Index

Clone this wiki locally