summaryrefslogtreecommitdiffstats
path: root/usr/local/www/tree/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'usr/local/www/tree/index.html')
-rw-r--r--usr/local/www/tree/index.html228
1 files changed, 0 insertions, 228 deletions
diff --git a/usr/local/www/tree/index.html b/usr/local/www/tree/index.html
deleted file mode 100644
index f2c45d4..0000000
--- a/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&eacute;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>
- &lt;link rel="stylesheet" type="text/css" media="all" href="tree.css" /&gt;<br />
- &lt;script type="text/javascript" src="tree.js"&gt;&lt;/script&gt;
- </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>
- &lt;ul class="tree"&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;<br />
- &lt;ul&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 1.1&lt;/a&gt;&lt;/li&gt;<br />
- &lt;li class="closed"&gt;&lt;a href="#"&gt;item 1.2&lt;/a&gt;<br />
- &lt;ul&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 1.2.1&lt;/a&gt;&lt;/li&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 1.2.2&lt;/a&gt;&lt;/li&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 1.2.3&lt;/a&gt;&lt;/li&gt;<br />
- &lt;/ul&gt; <br />
- &lt;/li&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 1.3&lt;/a&gt;&lt;/li&gt;<br />
- &lt;/ul&gt; <br />
- &lt;/li&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 2&lt;/a&gt;<br />
- &lt;ul&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 2.1&lt;/a&gt;&lt;/li&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 2.2&lt;/a&gt;&lt;/li&gt;<br />
- &lt;li&gt;&lt;a href="#"&gt;item 2.3&lt;/a&gt;&lt;/li&gt;<br />
- &lt;/ul&gt; <br />
- &lt;/li&gt;<br />
- &lt;/ul&gt;
- </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 &lt;span&gt; tags.
- So, the following HTML:
-
- <code>
- &lt;li&gt;&lt;a href="#"&gt;My item&lt;/a&gt;&lt;/li&gt;
- </code>
-
- Is turned into the more ungainly, and yet more easily styled:
-
- <code>
- &lt;li&gt;&lt;span class="a"&gt;&lt;span class="b"&gt;&lt;span class="c"&gt;&lt;a href="#"&gt;My item&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
- </code>
-
- Additionally, some helper classes are applied to the &lt;li&gt; and &lt;span class="a"&gt; 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 &lt;li&gt; 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 &lt;li&gt; and &lt;span class="a"&gt; 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 &copy; 2005 <a href="http://www.silverstripe.com/blog">SilverStripe Limited</a></p>
- </div>
- </div>
- </body>
-</html>
OpenPOWER on IntegriCloud