# Example: Initialization methods

This tree uses default options.
It is initalized from a hidden <ul> element on this page.

Skin:

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
- node with some extra classes (will be added to the generated markup)
- 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": "abc"} ]

Tree with programmatic dataAjax data

jquery.fancytree.js project home Link to this page Example Browser View source code