SilverStripe Tree Control

This tree control was put together by Sam Minnée at SilverStripe in New Zealand. We've put it out there for everyone to enjoy. Check out our blog if you're wondering what we're up to.

This file came from http://www.silverstripe.com/downloads/tree/. If you found this file elsewhere, check out that page: we might have posted an updated version.

Quick-links: Demo | Usage | Download | How it Works

Demo

Here's a basic demo of the tree control. Our styling is fairly basic, but with updated CSS and images you can do whatever you like. Just for fun, try changing the text size.

item 1
- item 1.1
- item 1.2
- item 1.3
item 2

Download

Download everything you need here - tree.zip, 11kb

Usage

The first thing to do is include the appropriate JavaScript and CSS files:


		<link rel="stylesheet" type="text/css" media="all" href="tree.css" />

		<script type="text/javascript" src="tree.js"></script>

Then, create the HTML for you tree. This is basically a nested set of bullet pointed links. The "tree" class at the top is what the script will look for. Note that you can make a tree ndoe closed to begin with by adding class="closed".

Here's the HTML code that I inserted to create the demo tree above.


	<ul class="tree">

		<li><a href="#">item 1</a>

		<ul>

			<li><a href="#">item 1.1</a></li>

			<li class="closed"><a href="#">item 1.2</a>

			<ul>

				<li><a href="#">item 1.2.1</a></li>

				<li><a href="#">item 1.2.2</a></li>

				<li><a href="#">item 1.2.3</a></li>

			</ul>	

			</li>

			<li><a href="#">item 1.3</a></li>

		</ul>	

		</li>

		<li><a href="#">item 2</a>

		<ul>

			<li><a href="#">item 2.1</a></li>

			<li><a href="#">item 2.2</a></li>

			<li><a href="#">item 2.3</a></li>

		</ul>	

		</li>

	</ul>

Your tree is now complete!

How it works

Starting the script

In simple situations, creating an auto-loading script is a simple matter of setting window.onload to a function. But what if there's more than one script? To this end, we created an appendLoader() function that will execute multiple loader functions, including a previously defined loader function

Finding the tree content

Rather than write a piece of script to define we're your tree is, we've tried to make the script as automatic as possible - it finds all ULs with a class name containing "tree".

Augmenting the HTML

Unfortunately, an LI containing an A isn't sufficient for doing all of the necessary tree styling. Rather than force people to put non-semantic HTML into their file, the script generates extra <span> tags. So, the following HTML:


			<li><a href="#">My item</a></li>

Is turned into the more ungainly, and yet more easily styled:


			<li><span class="a"><span class="b"><span class="c"><a href="#">My item</a></span></span></span></li>

Additionally, some helper classes are applied to the <li> and <span class="a"> elements:

"last" is applied to the last node of any subtree.
"children" is applied to any node that has children.

Styling it up

Why the heck do we need 5 styling elements? Basically, because there are 5 background-images to apply:

li: A repeating vertical line is shown. Nested <li> tags give us the multiple vertical lines that we need.
span.a: We overlay the vertical line with 'L' and 'T' elements as needed.
span.b: We overlay '+' or '-' signs on nodes with children.
span.c: This is needed to fix up the vertical line.
a: Finally, we apply the page icon.

Opening / closing nodes

Having come this far, the "dynamic" aspect of the tree control is very trivial. We set a "closed" class on the <li> and <span class="a"> elements, and our CSS takes care of hiding the children, changing the - to a + and changing the folder icon.