3.0
Rating: 3.0/5 (5 votes)

Tree List

A collapsible tree list. Submenus can be expanded and collapsed by clicking the icon to their left or double-clicking them.

Note: this does not yet work in IE7 and below due to how IE handles tiered lists. Final version will support IE 7+.

Demo

  • Home
  • Shopping
    • Clothing
      • Mens
      • Womens
      • Boys
      • Girls
  • Store Locator
    • United States
    • International
  • Contact
    • Customer Service
    • Returns
    • Media Relations

 

Source Example

<html> <head> <script language="javascript" src="protoplasm.js"></script> <script language="javascript"> Protoplasm.use('treelist').transform('ul.treelist'); </script> </head> <body> <ul class="treelist"> <li>Item 1</li> <li>Item 2</li> <li>Submenu</li> <ul> <li>Item 3</li> <li>Item 4</li> </ul> </ul> </body> </html>

Usage

To create tree lists out of all elements that match a given CSS rule:

Protoplasm.use('treelist').transform(selector[, options]);

Parameters:

Parameter Required Description
selector yes A CSS rule matching the text inputs to turn into tree lists.
options no An object (hash) containing name/value pairs of additional options.


Available options:
selectable Allow clicking to select and highlight an item (default: true)
onSelect A function to call when an item is clicked on. Two arguments are passed: the opened item's id (or text content), and the <li> element itself.
onOpen A function to call when an item is double-clicked on. Two arguments are passed: the opened item's id (or text content), and the <li> element itself.
childLoader A callback function that dynamically loads submenu elements when a submenu is expanded. The function takes two arguments: the submenu <ul> element's id, and a callback function to pass the child elements (an array of <li> and <ul> elements

Tree List transforms existing HTML content, so you are responsible for creating the HTML elements yourself. The HTML structure should be similar to the following:

<ul class="treelist"> <li>Item 1</li> <li>Item 2</li> <li>Submenu</li> <ul> <li>Item 3</li> <li>Item 4</li> </ul> </ul>

Advanced Usage

If you want more control over creation and destruction of the tree list, you can instantiate it manually instead of using Protoplasm.transform.

In your <head> section:

Protoplasm.use('treelist');

To create a tree list:

var list = new Control.TreeList(element[, options]);

To destroy the tree list:

list.destroy();

For more details, see the API documentation for Control.TreeList.