O'Reilly logo

Moodle JavaScript Cookbook by Alastair Hole

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying a tree-view navigation menu

Yet another method of displaying a navigational hierarchy is the tree-view. This is familiar to users from cases such as browsing a directory structure of files and folders within a graphical operating system shell (for example, Microsoft Windows Explorer).

At the time of writing, YUI3 lacks a stable port of the TreeView widget so we will be using the TreeView widget from YUI2.

How to do it...

  1. We must define the markup of our menu tree, in this example within nav_tree.php:
    <?php require_once(dirname(__FILE__) . '/../config.php'); $PAGE->set_context(get_context_instance(CONTEXT_SYSTEM)); $PAGE->set_url('/cook/nav_tree.php'); $PAGE->requires->js('/cook/nav_tree.js', true); echo $OUTPUT->header(); ?> <div id="treeContainer"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required