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 (3.2KB)

<ntb:tree xmlns:ntb="http://www.nitobi.com" theme="finefolders" id="tree1" expanded="false">
				<ntb:children>
					<ntb:node label="Dinosauria">
						<ntb:children>
							<ntb:node label="Theropods">
								<ntb:children>
									<ntb:node label="Herrerasauria">
										<ntb:children>
											<ntb:node label="Saltopodidae">
											</ntb:node>
										</ntb:children>
									</ntb:node>
									<ntb:node label="Ceratosauria">
									</ntb:node>						
									<ntb:node label="Coelurosauria">
									</ntb:node>						
								</ntb:children>
							</ntb:node>
							<ntb:node label="Ornithopods ">
							</ntb:node>
							<ntb:node label="Ceratopians ">
							</ntb:node>
							<ntb:node label="Thyreophorans ">
							</ntb:node>
							<ntb:node label="Saurischians ">
							</ntb:node>
							<ntb:node label="Ornithischians ">
							</ntb:node>
							<ntb:node label="Sauropods">
								<ntb:children>
									<ntb:node label="Prosauropoda ">
									</ntb:node>
									<ntb:node label="Sauropoda ">
									</ntb:node>						
								</ntb:children>
							</ntb:node>
						</ntb:children>
					</ntb:node>	
				</ntb:children>				
			</ntb:tree>

This sample demonstrates thee tree's ability to serialize itself to XML. In this case, the XML is stored in a cookie. The next time the tree loads, the tree is restored to the previous state.

Click one of the nodes.
Select a node so that it is highlighted
Reload the page
To restore the default, click Clear & Disable Cookie and then reload the page.

Note that the tree is preserved, including the last selected node.

Example Source Code (hide)

Component Markup

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.