# Example: Initialization Methods

Use different methods to initialize the tree (Ajax, embedded <ul>, embedded JSON).
Also distinct nodes contain custom data using `data="..."` attributes.
See the LoadData Tutorial for details.

Skin:

Load from embedded <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)

Load from Ajax data:

Load from embedded JSON data:

{"foo": "bazbaz", "children": [ {"title": "node 1"}, {"title": "node 2", "folder": true } ]}

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