-
-
Notifications
You must be signed in to change notification settings - Fork 601
ExtGlyph
About Fancytree glyph extension.
- Status: production
- Examples: bootstrap and font awesome
Use glyph-fonts, ligature-fonts, or SVG icons instead of icon sprites.
This plugin includes presets for some popular glyph fonts (e.g. Font Awesome, ...) and ligature fonts (e.g. Material icons). There is also a demo for SVG icons.
-
map, type: {object}, default:
{}
Map of icon class names for different symbol types. Use this map to override the settings that are defined by thepreset
option. -
preset, type: {object}, default:
awesome4
(since 2.24)
Define a default set of icon names.
Possible values: "awesome3", "awesome4", "bootstrap3".
Don't forget to include a matching css file for the preset.
ext-glyph
does not define own callbacks, but the tree.options.icon
option
is also useful here to define node icons (simply return a the class names,
e.g. "fa fa-foobar").
(n.a.)
In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.glyph.js
.
Then add the glyph css, like bootstrap.min.css
, font-awesome.min.css
, or similar.
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
:
<!-- Include glyph font definitions, for example matching `preset: "awesome4"` -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<!-- Include a Fancytree skin that support glyphs -->
<link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/jquery.fancytree-all-deps.min.js"></script>
$("#tree").fancytree({
extensions: ["glyph"],
icon: function(event, data){
// (Optional dynamic icon definition...)
},
glyph: {
// The preset defines defaults for all supported icon types.
// It also defines a common class name that is prepended (in this case 'fa ')
preset: "awesome4",
map: {
// Override distinct default icons here
folder: "fa-folder",
folderOpen: "fa-folder-open"
}
},
...
});
The bootstrap theme also plays well with the ext-wide
extension.
Include the glyph css, use the skin-awesome
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">
preset: "awesome3"
defines these default mappings:
map: {
_addClass: "",
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",
loading: "icon-refresh icon-spin",
nodata: "icon-meh",
noExpander: "",
radio: "icon-circle-blank",
radioSelected: "icon-circle",
// Default node icons.
// (Use tree.options.icon 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"
}
Online Demo
Font Awesome 3.2 icon overview.
Include the glyph css, use the skin-awesome
theme, and define the icon mapping:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet">
preset: "awesome4"
defines these default mappings:
map: {
_addClass: "fa",
checkbox: "fa-square-o",
checkboxSelected: "fa-check-square-o",
checkboxUnknown: "fa-square",
dragHelper: "fa-arrow-right",
dropMarker: "fa-long-arrow-right",
error: "fa-warning",
expanderClosed: "fa-caret-right",
expanderLazy: "fa-angle-right",
expanderOpen: "fa-caret-down",
loading: "fa-spinner fa-pulse",
nodata: "fa-meh-o",
noExpander: "",
radio: "fa-circle-thin", // "fa-circle-o"
radioSelected: "fa-circle",
// Default node icons.
// (Use tree.options.icon callback to define custom icons based on node data)
doc: "fa-file-o",
docOpen: "fa-file-o",
folder: "fa-folder-o",
folderOpen: "fa-folder-open-o"
}
Online Demo
Font Awesome 4.x icon overview
Include the glyph css, use the skin-awesome
theme, and define the icon mapping:
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet">
preset: "awesome5"
defines these default mappings:
NOTE: See also the alternative approach using SVG icons
map: {
_addClass: "",
checkbox: "fas fa-square",
checkboxSelected: "fas fa-check-square",
checkboxUnknown: "fas fa-square",
radio: "fas fa-circle",
radioSelected: "fas fa-circle",
radioUnknown: "fas fa-dot-circle",
dragHelper: "fas fa-arrow-right",
dropMarker: "fas fa-long-arrow-right",
error: "fas fa-exclamation-triangle",
expanderClosed: "fas fa-caret-right",
expanderLazy: "fas fa-angle-right",
expanderOpen: "fas fa-caret-down",
loading: "fas fa-spinner fa-pulse",
nodata: "fas fa-meh",
noExpander: "",
// Default node icons.
// (Use tree.options.icon callback to define custom icons based on node data)
doc: "fas fa-file",
docOpen: "fas fa-file",
folder: "fas fa-folder",
folderOpen: "fas fa-folder-open"
}
Online Demo
Font Awesome 5.x icon overview
Note: Starting with release v4, Bootstrap does not include own icons, but recommends external libraries.
Include the glyph css, use the skin-bootstrap
theme, and define the icon mapping:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../src/skin-bootstrap/ui.fancytree.css" rel="stylesheet">
preset: "bootstrap3"
defines these default mappings:
map: {
_addClass: "glyphicon",
checkbox: "glyphicon-unchecked",
checkboxSelected: "glyphicon-check",
checkboxUnknown: "glyphicon-expand", // "glyphicon-share",
dragHelper: "glyphicon-play",
dropMarker: "glyphicon-arrow-right",
error: "glyphicon-warning-sign",
expanderClosed: "glyphicon-menu-right", // glyphicon-plus-sign
expanderLazy: "glyphicon-menu-right", // glyphicon-plus-sign
expanderOpen: "glyphicon-menu-down", // glyphicon-minus-sign
loading: "glyphicon-refresh fancytree-helper-spin",
nodata: "glyphicon-info-sign",
noExpander: "",
radio: "glyphicon-remove-circle", // "glyphicon-unchecked",
radioSelected: "glyphicon-ok-circle", // "glyphicon-check",
// Default node icons.
// (Use tree.options.icon callback to define custom icons based on node data)
doc: "glyphicon-file",
docOpen: "glyphicon-file",
folder: "glyphicon-folder-close",
folderOpen: "glyphicon-folder-open"
}
Online Demo
Bootstrap 3 Icon overview
Include the glyph css, use the skin-awesome
theme, and define the icon mapping:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet">
preset: "bootstrap3"
defines these default mappings:
map: {
_addClass: "material-icons",
checkbox: { text: "check_box_outline_blank" },
checkboxSelected: { text: "check_box" },
checkboxUnknown: { text: "indeterminate_check_box" },
dragHelper: { text: "play_arrow" },
dropMarker: { text: "arrow-forward" },
error: { text: "warning" },
expanderClosed: { text: "chevron_right" },
expanderLazy: { text: "last_page" },
expanderOpen: { text: "expand_more" },
loading: { text: "autorenew", addClass: "fancytree-helper-spin" },
nodata: { text: "info" },
noExpander: { text: "" },
radio: { text: "radio_button_unchecked" },
radioSelected: { text: "radio_button_checked" },
// Default node icons.
// (Use tree.options.icon callback to define custom icons based on node data)
doc: { text: "web_asset" },
docOpen: { text: "web_asset" },
folder: { text: "folder" },
folderOpen: { text: "folder" }
}
Online Demo
Material Design icon overview.
See the demo for SVG icons.
Use the icon
callback to define per-node custom icons:
$("#tree").fancytree({
...
icon: function(event, data){
if( data.node.isFolder() ) {
return "glyphicon glyphicon-book";
}
},
Another approach is to override the icon class directly with the node data:
[
{"title": "Node 1", "key": "1", "icon": "glyphicon glyphicon-book" },
...
Documentation Home - Project Page - Copyright (c) 2008-2022, Martin Wendt (https://wwWendt.de)