<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Tree Menu From JSON | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="featured widget menu Uize.Widgets.NavTree.Menu.Widget"/>
  <meta name="description" content="See a demo of JavaScript menus, that can be easily built from a JSON object and can even be dynamically updated. These menus also support separators."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>


<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Tree Menu From JSON
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/tree-menu.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widgets.NavTree.Menu.Widget.html"><code>Uize.Widgets.NavTree.Menu.Widget</code></a> is instantiated to produce a multi-level menu. The markup for the menu is generated when the widget is wired up. The structure for the markup is driven by a JSON data structure that is supplied to the <code>items</code> state property of the widget. This data structure is purely for demonstration purposes, so none of the items have active links specified (i.e. clicking does nothing). The generated markup does not contain any styling, and the decoration for the menu is controlled by separate CSS in the page. As you interact with the menu, notice how the selection path is highlighted as you go deeper into submenus. Lower down the page, below the menu, are some links that execute snippets of code to demonstrate the programmatic interface of the widget.</p>

  <div id="page-treeMenu" style="height:200px;"></div>

  <!-- programmatic interface examples -->

  <div class="programmaticInterface">
        <a href="javascript://" class="linkedJs">treeMenu.set ({items:animalsAndPlants})</a><br/>
          <li><a href="javascript://" class="linkedJs">treeMenu.collapseAllBut (['Animals','Wild Animals','Cats','Tiger'])</a></li>
          <li><a href="javascript://" class="linkedJs">treeMenu.collapseAllBut (['Plants','Bushes and Shrubs','Hedges','Escallonia'])</a></li>
        <a href="javascript://" class="linkedJs">treeMenu.set ({items:Uize.Test.TestData.Animals ()})</a><br/>
          <li><a href="javascript://" class="linkedJs">treeMenu.collapseAllBut (['Pets','Dogs','Large Breeds'])</a></li>
        <a href="javascript://" class="linkedJs">treeMenu.set ({items:Uize.Test.TestData.Plants ()})</a><br/>
          <li><a href="javascript://" class="linkedJs">treeMenu.collapseAllBut (['Trees','Deciduous'])</a></li>
      <li><a href="javascript://" class="linkedJs">treeMenu.setExpandedDepth (0)</a></li>

<!-- JavaScript code to create tree menu instance and insert and wire its UI -->

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** add the tree menu child widget ***/
        animalsAndPlants = Uize.Test.TestData.AnimalsAndPlants (),
        treeMenu = page.addChild (

    /*** wire up the page widget ***/
      page.wireUi ();