diff options
Diffstat (limited to 'src/usr/local/www/tree/index.html')
| -rw-r--r-- | src/usr/local/www/tree/index.html | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/src/usr/local/www/tree/index.html b/src/usr/local/www/tree/index.html new file mode 100644 index 0000000..f2c45d4 --- /dev/null +++ b/src/usr/local/www/tree/index.html @@ -0,0 +1,228 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > + + <head> + <title>SilverStripe Tree Control</title> + <link rel="stylesheet" type="text/css" media="all" href="tree.css" /> + <script type="text/javascript" src="tree.js"></script> + <style> + html { + background-color: #DDD; + } + body { + font-size: 80%; + font-family: Arial, Helvetica, sans-serif; + width: 50em; + margin: 0 auto 3.5em auto; + padding: 1em; + background-color: white; + border-left: 1px #CCC solid; + border-right: 1px #CCC solid; + } + ul.tree a { + font-size: 0.8em; + + } + code { + display: block; + font-size: 1.2em; + margin: 2em 5em; + padding: 0.5em; + border: 1px #CCC solid; + background-color: #EEE; + } + #version { + float: right; + font-style: italic; + margin-top: -4em; + } + + dt { + margin: 1.2em 0 0.2em 0; + font-weight: bold; + font-size: 1.1em + } + dd { + margin: 0; + } + h2 { + margin-top: 4em; + border-bottom: 1px #CCC dotted; + } + + #footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 3em; + } + #footer div { + margin: auto; + width: 52em; + height: 3em; + background-color: #777; + color: white; + } + #footer a { + color: white; + } + #footer p.left { + float: left; + margin: 0.75em 1em; + } + #footer p.right { + float: right; + margin: 0.75em 1em; + } + + </style> + </head> + +<body> + + <h1>SilverStripe Tree Control</h1> + <p>This tree control was put together by <a href="sam@silverstripe.com">Sam Minnée</a> at + <a href="http://www.silverstripe.com/blog">SilverStripe</a> in New Zealand. We've put it out there + for everyone to enjoy. Check out <a href="http://www.silverstripe.com/blog">our blog</a> if you're + wondering what we're up to.</p> + <p>This file came from <a href="http://www.silverstripe.com/downloads/tree/">http://www.silverstripe.com/downloads/tree/</a>. + If you found this file elsewhere, check out that page: we might have posted an updated version.</p> + + <p> + <b>Quick-links:</b> + <a href="#Demo">Demo</a> | <a href="#Usage">Usage</a> | <a href="#Download">Download</a> | <a href="#HowItWorks">How it Works</a> + </p> + + <h2 id="Demo">Demo</h2> + <p>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.</p> + + <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> + + <h2 id="Download">Download</h2> + + <p><a href="../tree.zip">Download everything you need here</a> - tree.zip, 11kb</p> + + <h2 id="Usage">Usage</h2> + + <p>The first thing to do is include the appropriate JavaScript and CSS files:</p> + + <code> + <link rel="stylesheet" type="text/css" media="all" href="tree.css" /><br /> + <script type="text/javascript" src="tree.js"></script> + </code> + + <p>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".</p> + + <p>Here's the HTML code that I inserted to create the demo tree above.</p> + + <code> + <ul class="tree"><br /> + <li><a href="#">item 1</a><br /> + <ul><br /> + <li><a href="#">item 1.1</a></li><br /> + <li class="closed"><a href="#">item 1.2</a><br /> + <ul><br /> + <li><a href="#">item 1.2.1</a></li><br /> + <li><a href="#">item 1.2.2</a></li><br /> + <li><a href="#">item 1.2.3</a></li><br /> + </ul> <br /> + </li><br /> + <li><a href="#">item 1.3</a></li><br /> + </ul> <br /> + </li><br /> + <li><a href="#">item 2</a><br /> + <ul><br /> + <li><a href="#">item 2.1</a></li><br /> + <li><a href="#">item 2.2</a></li><br /> + <li><a href="#">item 2.3</a></li><br /> + </ul> <br /> + </li><br /> + </ul> + </code> + + <p>Your tree is now complete!</p> + + <h2 id="HowItWorks">How it works</h2> + <dl> + <dt>Starting the script</dt> + <dd>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</dd> + + <dt>Finding the tree content</dt> + <dd>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".</dd> + + <dt>Augmenting the HTML</dt> + <dd>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: + + <code> + <li><a href="#">My item</a></li> + </code> + + Is turned into the more ungainly, and yet more easily styled: + + <code> + <li><span class="a"><span class="b"><span class="c"><a href="#">My item</a></span></span></span></li> + </code> + + Additionally, some helper classes are applied to the <li> and <span class="a"> elements: + <ul> + <li>"last" is applied to the last node of any subtree.</li> + <li>"children" is applied to any node that has children.</li> + </ul> + </dd> + + <dt>Styling it up</dt> + <dd>Why the heck do we need 5 styling elements? Basically, because there are 5 background-images to apply: + <ul> + <li><b>li:</b> A repeating vertical line is shown. Nested <li> tags + give us the multiple vertical lines that we need.</li> + <li><b>span.a:</b> We overlay the vertical line with 'L' and 'T' elements as needed.</li> + <li><b>span.b:</b> We overlay '+' or '-' signs on nodes with children.</li> + <li><b>span.c:</b> This is needed to fix up the vertical line.</li> + <li><b>a:</b> Finally, we apply the page icon.</li> + </ul> + </dd> + + <dt>Opening / closing nodes</dt> + <dd>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.</dd> + </dl> + + <div id="footer"> + <div> + <p class="left"><a href="http://www.silverstripe.com/downloads/tree">SilverStripe Tree Control</a>: v0.1, 30 Oct 2005</p> + <p class="right">Copyright © 2005 <a href="http://www.silverstripe.com/blog">SilverStripe Limited</a></p> + </div> + </div> + </body> +</html> |
