mirror of
https://github.com/pfsense/pfsense.git
synced 2025-10-26 11:38:35 +00:00
229 lines
7.3 KiB
HTML
229 lines
7.3 KiB
HTML
<!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>
|