UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Get Tree from List

In this example, the Uize.Dom.Tree.getTreeFromList static method of the Uize.Dom.Tree module is being used to build a tree data object by analyzing the structure of a nested list defined by an HTML ul tag. A tree data object like this can be supplied to a tree menu widget, or can otherwise be used to build UI for navigating to different sections of the document (a contents tree, for example). A tree data object can also be generated by analyzing the occurrence of different CSS classes for section headings at different depths of the document, using the Uize.Dom.Tree.getTreeFromPage method (see the Get Tree from Page example).

Nested Unordered Lists Generated Tree Data Object
  • Dogs
    • Small Breeds
      • West Highland White
      • Mexican Hairless
      • Miniature Chihuahua
      • Teacup Poodle
    • Large Breeds
      • Afghan
      • Great Dane
      • Irish Wolfhound
      • St. Bernard
  • Cats
    • Persian
    • Siamese
    • Hairless
  • Other
    • Bunny
    • Hamster
    • Mouse
    • Rat