Nitobi | Products: Ajax Tree Component

Nitobi Tree

Overview

A dynamic tree component with Ajax drill-down, unbound mode, client-side statefulness, skinnability, and data-driven sidebar. Download our open-source Nitobi Tree component today.

Live Demo | View Source | Download Now (2.9KB)

This sample demonstrates the tree's ability to accept a new data source at run-time. In this case, the XML is stored in a file on the server, although you could easily modify it to populate the tree from a database.

Click one of the nodes.
Click this Change Data.
Watch as that node's children are replaced by the children specified in the file.

Note: If no nodes are selected, we will change the datasource for the tree itself.

Example Source Code (hide)

Component Markup

<ntb:tree id="tree1" theme="documents">
	<ntb:children>
		<ntb:node label="A node (without any children)">
			<ntb:children></ntb:children>
		</ntb:node>
		<ntb:node label="A leaf (no possibility of children)"></ntb:node>
		<ntb:node label="A node (with children)" expanded="false">
			<ntb:children>
				<ntb:node label="A leaf"></ntb:node>
				<ntb:node label="A node">
					<ntb:children>
						<ntb:node label="A node">
							<ntb:children></ntb:children>
						</ntb:node>
						<ntb:node label="A leaf"></ntb:node>
						<ntb:node label="A node">
							<ntb:children>
								<ntb:node label="A leaf"></ntb:node>
							</ntb:children>
						</ntb:node>
					</ntb:children>
				</ntb:node>
				<ntb:node label="A leaf"></ntb:node>
				<ntb:node label="A node">
					<ntb:children>
						<ntb:node label="A leaf"></ntb:node>
						<ntb:node label="A node">
							<ntb:children></ntb:children>
						</ntb:node>
						<ntb:node label="A leaf"></ntb:node>
						<ntb:node label="A node">
							<ntb:children>
								<ntb:node label="A leaf"></ntb:node>
							</ntb:children>
						</ntb:node>
					</ntb:children>
				</ntb:node>
			</ntb:children>
		</ntb:node>
	</ntb:children>
</ntb:tree>

JavaScript Code

Overview

Multi-mode operation

Bind a tree to a PHP, ASP, Coldfusion, or Java datasource, or bind to an on-page static datasource.

Expand-collapse Transitions

Optional opacity and animation effects add to a responsive and fluid user interface.

Optional data-driven Side Panel

The sidebar provides additional information to the user about nodes.

Integrates with Adobe Dreamweaver.

Simply drag and drop Ajax components into sites and applications using Adobe Dreamweaver CS3.

Fully Skinnable

Customize the look and feel, and add custom-skinned nodes through CSS templating.

Full Keyboard Support

Fully compliant keyboard support speeds up user interactions.

Native Statefulness

Selected node, and node expand/collapse state for all nodes can be stored as a cookie and restored automatically.