diff options
| author | Stephen Beaver <sbeaver@netgate.com> | 2015-11-28 13:32:58 -0500 |
|---|---|---|
| committer | Stephen Beaver <sbeaver@netgate.com> | 2015-11-28 13:32:58 -0500 |
| commit | 6ce467538c67ad0312d73148e8fa0b38e853f40f (patch) | |
| tree | ef0e6c83e42aeafab33e9afba9e1c1e31045eea8 | |
| parent | fb05b98809a14491f91ea6ffc36e463444b3d8c4 (diff) | |
| download | pfsense-6ce467538c67ad0312d73148e8fa0b38e853f40f.zip pfsense-6ce467538c67ad0312d73148e8fa0b38e853f40f.tar.gz | |
Unneeded tree/index.html removed per #5536
| -rwxr-xr-x | src/usr/local/www/tree/index.html | 228 |
1 files changed, 0 insertions, 228 deletions
diff --git a/src/usr/local/www/tree/index.html b/src/usr/local/www/tree/index.html deleted file mode 100755 index f2c45d4..0000000 --- a/src/usr/local/www/tree/index.html +++ /dev/null @@ -1,228 +0,0 @@ -<!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> |
