Skip to Navigation | Skip to Content

Products

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.7KB)

Example Source Code (hide)

Component Markup

<table>
<tr><td>
<div id="treeframe">
<ntb:tree xmlns:ntb="http://www.nitobi.com" hoverhighlight="true" theme="folders" id="tree1" expanded="true" targetframe="targetframe">
	<ntb:children>
		<ntb:node label="Search">
			<ntb:children>
				<ntb:node label="Google" url="http://www.google.com"></ntb:node>
				<ntb:node label="Ask" url="http://www.ask.com"></ntb:node>
				<ntb:node label="Yahoo!" url="http://www.yahoo.com"></ntb:node>
			</ntb:children>
		</ntb:node>
		<ntb:node label="Photos">
			<ntb:children>
				<ntb:node label="Photobucket" url="http://www.photobucket.com"></ntb:node>
				<ntb:node label="Flickr" url="http://www.flickr.com"></ntb:node>
			</ntb:children>
		</ntb:node>
		<ntb:node label="Video">
			<ntb:children>
				<ntb:node label="Youtube" url="http://www.youtube.com"></ntb:node>
				<ntb:node label="Google Video" url="http://video.google.com"></ntb:node>
				<ntb:node label="Revver" url="http://www.revver.com"></ntb:node>				
			</ntb:children>
		</ntb:node>
		<ntb:node label="Newspapers">
			<ntb:children>
				<ntb:node label="New York Times" url="http://www.nytimes.com"></ntb:node>
				<ntb:node label="Globe and Mail" url="http://www.globeandmail.com"></ntb:node>
				<ntb:node label="Telegraph" url="http://www.telegraph.co.uk/"></ntb:node>				
			</ntb:children>
		</ntb:node>
	</ntb:children>				
</ntb:tree>
</div> 
</td><td>
<iframe name="targetframe" id="targetframe" frameborder="0" border="0" width="600" height="500"></iframe>
</td></tr>
</table>

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.

Products