Example: Initialization methods
This tree uses default options.
It is initalized from a hidden <ul> element on this page.
Tree with UL markup
- simple node (no explicit id, so a default key is generated)
- Define key and tooltip using 'id' and 'title' attributes
- item2 with html inside a span tag
- this nodes adds class 'nolink', so no <a> tag is generated
- using single a-tag to pass href (this would be clickable even if JavaScript is off)
- defining custom node.data.foo = 'bar' using a data-foo attribute
- defining node.data.foo = 'bar' using a data-json attribute
- Folder with some children
- Sub-item 3.1
- Sub-item 3.1.1
- Sub-item 3.1.2
- Sub-item 3.2
- Sub-item 3.2.1
- Sub-item 3.2.2
- Document with some children (expanded on init)
- Sub-item 4.1 (active and focus on init)
- Sub-item 4.1.1
- Sub-item 4.1.2
- Sub-item 4.2
- Sub-item 4.2.1
- Sub-item 4.2.2
- Lazy loading folder
- Lazy loading folder (expand on init)
Tree with Ajax data
Tree with embedded JSON data
[
{"title": "cäsar€"},
{"title": "a
bc"}
]
Tree with programmatic dataAjax data
jquery.fancytree.js project home
Link to this page
Example Browser
View source code