Protoplasm

3.0

Rating: 3.0/5 (1 vote)

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

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();