| 1 |
6f7c7c79
|
Bill Marquette
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
| 2 |
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
|
| 3 |
|
|
|
| 4 |
|
|
<head>
|
| 5 |
|
|
<title>SilverStripe Tree Control</title>
|
| 6 |
|
|
<link rel="stylesheet" type="text/css" media="all" href="tree.css" />
|
| 7 |
|
|
<script type="text/javascript" src="tree.js"></script>
|
| 8 |
|
|
<style>
|
| 9 |
|
|
html {
|
| 10 |
|
|
background-color: #DDD;
|
| 11 |
|
|
}
|
| 12 |
|
|
body {
|
| 13 |
|
|
font-size: 80%;
|
| 14 |
|
|
font-family: Arial, Helvetica, sans-serif;
|
| 15 |
|
|
width: 50em;
|
| 16 |
|
|
margin: 0 auto 3.5em auto;
|
| 17 |
|
|
padding: 1em;
|
| 18 |
|
|
background-color: white;
|
| 19 |
|
|
border-left: 1px #CCC solid;
|
| 20 |
|
|
border-right: 1px #CCC solid;
|
| 21 |
|
|
}
|
| 22 |
|
|
ul.tree a {
|
| 23 |
|
|
font-size: 0.8em;
|
| 24 |
|
|
|
| 25 |
|
|
}
|
| 26 |
|
|
code {
|
| 27 |
|
|
display: block;
|
| 28 |
|
|
font-size: 1.2em;
|
| 29 |
|
|
margin: 2em 5em;
|
| 30 |
|
|
padding: 0.5em;
|
| 31 |
|
|
border: 1px #CCC solid;
|
| 32 |
|
|
background-color: #EEE;
|
| 33 |
|
|
}
|
| 34 |
|
|
#version {
|
| 35 |
|
|
float: right;
|
| 36 |
|
|
font-style: italic;
|
| 37 |
|
|
margin-top: -4em;
|
| 38 |
|
|
}
|
| 39 |
|
|
|
| 40 |
|
|
dt {
|
| 41 |
|
|
margin: 1.2em 0 0.2em 0;
|
| 42 |
|
|
font-weight: bold;
|
| 43 |
|
|
font-size: 1.1em
|
| 44 |
|
|
}
|
| 45 |
|
|
dd {
|
| 46 |
|
|
margin: 0;
|
| 47 |
|
|
}
|
| 48 |
|
|
h2 {
|
| 49 |
|
|
margin-top: 4em;
|
| 50 |
|
|
border-bottom: 1px #CCC dotted;
|
| 51 |
|
|
}
|
| 52 |
|
|
|
| 53 |
|
|
#footer {
|
| 54 |
|
|
position: fixed;
|
| 55 |
|
|
bottom: 0;
|
| 56 |
|
|
left: 0;
|
| 57 |
|
|
width: 100%;
|
| 58 |
|
|
height: 3em;
|
| 59 |
|
|
}
|
| 60 |
|
|
#footer div {
|
| 61 |
|
|
margin: auto;
|
| 62 |
|
|
width: 52em;
|
| 63 |
|
|
height: 3em;
|
| 64 |
|
|
background-color: #777;
|
| 65 |
|
|
color: white;
|
| 66 |
|
|
}
|
| 67 |
|
|
#footer a {
|
| 68 |
|
|
color: white;
|
| 69 |
|
|
}
|
| 70 |
|
|
#footer p.left {
|
| 71 |
|
|
float: left;
|
| 72 |
|
|
margin: 0.75em 1em;
|
| 73 |
|
|
}
|
| 74 |
|
|
#footer p.right {
|
| 75 |
|
|
float: right;
|
| 76 |
|
|
margin: 0.75em 1em;
|
| 77 |
|
|
}
|
| 78 |
|
|
|
| 79 |
|
|
</style>
|
| 80 |
|
|
</head>
|
| 81 |
|
|
|
| 82 |
|
|
<body>
|
| 83 |
|
|
|
| 84 |
|
|
<h1>SilverStripe Tree Control</h1>
|
| 85 |
|
|
<p>This tree control was put together by <a href="sam@silverstripe.com">Sam Minnée</a> at
|
| 86 |
|
|
<a href="http://www.silverstripe.com/blog">SilverStripe</a> in New Zealand. We've put it out there
|
| 87 |
|
|
for everyone to enjoy. Check out <a href="http://www.silverstripe.com/blog">our blog</a> if you're
|
| 88 |
|
|
wondering what we're up to.</p>
|
| 89 |
|
|
<p>This file came from <a href="http://www.silverstripe.com/downloads/tree/">http://www.silverstripe.com/downloads/tree/</a>.
|
| 90 |
|
|
If you found this file elsewhere, check out that page: we might have posted an updated version.</p>
|
| 91 |
|
|
|
| 92 |
|
|
<p>
|
| 93 |
|
|
<b>Quick-links:</b>
|
| 94 |
|
|
<a href="#Demo">Demo</a> | <a href="#Usage">Usage</a> | <a href="#Download">Download</a> | <a href="#HowItWorks">How it Works</a>
|
| 95 |
|
|
</p>
|
| 96 |
|
|
|
| 97 |
|
|
<h2 id="Demo">Demo</h2>
|
| 98 |
|
|
<p>Here's a basic demo of the tree control. Our styling is fairly basic, but with updated CSS and
|
| 99 |
|
|
images you can do whatever you like. Just for fun, try changing the text size.</p>
|
| 100 |
|
|
|
| 101 |
|
|
<ul class="tree">
|
| 102 |
|
|
<li><a href="#">item 1</a>
|
| 103 |
|
|
<ul>
|
| 104 |
|
|
<li><a href="#">item 1.1</a></li>
|
| 105 |
|
|
<li class="closed"><a href="#">item 1.2</a>
|
| 106 |
|
|
<ul>
|
| 107 |
|
|
<li><a href="#">item 1.2.1</a></li>
|
| 108 |
|
|
<li><a href="#">item 1.2.2</a></li>
|
| 109 |
|
|
<li><a href="#">item 1.2.3</a></li>
|
| 110 |
|
|
</ul>
|
| 111 |
|
|
</li>
|
| 112 |
|
|
<li><a href="#">item 1.3</a></li>
|
| 113 |
|
|
</ul>
|
| 114 |
|
|
</li>
|
| 115 |
|
|
<li><a href="#">item 2</a>
|
| 116 |
|
|
<ul>
|
| 117 |
|
|
<li><a href="#">item 2.1</a></li>
|
| 118 |
|
|
<li><a href="#">item 2.2</a></li>
|
| 119 |
|
|
<li><a href="#">item 2.3</a></li>
|
| 120 |
|
|
</ul>
|
| 121 |
|
|
</li>
|
| 122 |
|
|
</ul>
|
| 123 |
|
|
|
| 124 |
|
|
<h2 id="Download">Download</h2>
|
| 125 |
|
|
|
| 126 |
|
|
<p><a href="../tree.zip">Download everything you need here</a> - tree.zip, 11kb</p>
|
| 127 |
|
|
|
| 128 |
|
|
<h2 id="Usage">Usage</h2>
|
| 129 |
|
|
|
| 130 |
|
|
<p>The first thing to do is include the appropriate JavaScript and CSS files:</p>
|
| 131 |
|
|
|
| 132 |
|
|
<code>
|
| 133 |
|
|
<link rel="stylesheet" type="text/css" media="all" href="tree.css" /><br />
|
| 134 |
|
|
<script type="text/javascript" src="tree.js"></script>
|
| 135 |
|
|
</code>
|
| 136 |
|
|
|
| 137 |
|
|
<p>Then, create the HTML for you tree. This is basically a nested set of bullet pointed links. The
|
| 138 |
|
|
"tree" class at the top is what the script will look for. Note that you can make a tree ndoe closed
|
| 139 |
|
|
to begin with by adding class="closed".</p>
|
| 140 |
|
|
|
| 141 |
|
|
<p>Here's the HTML code that I inserted to create the demo tree above.</p>
|
| 142 |
|
|
|
| 143 |
|
|
<code>
|
| 144 |
|
|
<ul class="tree"><br />
|
| 145 |
|
|
<li><a href="#">item 1</a><br />
|
| 146 |
|
|
<ul><br />
|
| 147 |
|
|
<li><a href="#">item 1.1</a></li><br />
|
| 148 |
|
|
<li class="closed"><a href="#">item 1.2</a><br />
|
| 149 |
|
|
<ul><br />
|
| 150 |
|
|
<li><a href="#">item 1.2.1</a></li><br />
|
| 151 |
|
|
<li><a href="#">item 1.2.2</a></li><br />
|
| 152 |
|
|
<li><a href="#">item 1.2.3</a></li><br />
|
| 153 |
|
|
</ul> <br />
|
| 154 |
|
|
</li><br />
|
| 155 |
|
|
<li><a href="#">item 1.3</a></li><br />
|
| 156 |
|
|
</ul> <br />
|
| 157 |
|
|
</li><br />
|
| 158 |
|
|
<li><a href="#">item 2</a><br />
|
| 159 |
|
|
<ul><br />
|
| 160 |
|
|
<li><a href="#">item 2.1</a></li><br />
|
| 161 |
|
|
<li><a href="#">item 2.2</a></li><br />
|
| 162 |
|
|
<li><a href="#">item 2.3</a></li><br />
|
| 163 |
|
|
</ul> <br />
|
| 164 |
|
|
</li><br />
|
| 165 |
|
|
</ul>
|
| 166 |
|
|
</code>
|
| 167 |
|
|
|
| 168 |
|
|
<p>Your tree is now complete!</p>
|
| 169 |
|
|
|
| 170 |
|
|
<h2 id="HowItWorks">How it works</h2>
|
| 171 |
|
|
<dl>
|
| 172 |
|
|
<dt>Starting the script</dt>
|
| 173 |
|
|
<dd>In simple situations, creating an auto-loading script is a simple matter of setting window.onload
|
| 174 |
|
|
to a function. But what if there's more than one script? To this end, we created an appendLoader()
|
| 175 |
|
|
function that will execute multiple loader functions, including a previously defined loader function</dd>
|
| 176 |
|
|
|
| 177 |
|
|
<dt>Finding the tree content</dt>
|
| 178 |
|
|
<dd>Rather than write a piece of script to define we're your tree is, we've tried to make the script
|
| 179 |
|
|
as automatic as possible - it finds all ULs with a class name containing "tree".</dd>
|
| 180 |
|
|
|
| 181 |
|
|
<dt>Augmenting the HTML</dt>
|
| 182 |
|
|
<dd>Unfortunately, an LI containing an A isn't sufficient for doing all of the necessary tree styling.
|
| 183 |
|
|
Rather than force people to put non-semantic HTML into their file, the script generates extra <span> tags.
|
| 184 |
|
|
So, the following HTML:
|
| 185 |
|
|
|
| 186 |
|
|
<code>
|
| 187 |
|
|
<li><a href="#">My item</a></li>
|
| 188 |
|
|
</code>
|
| 189 |
|
|
|
| 190 |
|
|
Is turned into the more ungainly, and yet more easily styled:
|
| 191 |
|
|
|
| 192 |
|
|
<code>
|
| 193 |
|
|
<li><span class="a"><span class="b"><span class="c"><a href="#">My item</a></span></span></span></li>
|
| 194 |
|
|
</code>
|
| 195 |
|
|
|
| 196 |
|
|
Additionally, some helper classes are applied to the <li> and <span class="a"> elements:
|
| 197 |
|
|
<ul>
|
| 198 |
|
|
<li>"last" is applied to the last node of any subtree.</li>
|
| 199 |
|
|
<li>"children" is applied to any node that has children.</li>
|
| 200 |
|
|
</ul>
|
| 201 |
|
|
</dd>
|
| 202 |
|
|
|
| 203 |
|
|
<dt>Styling it up</dt>
|
| 204 |
|
|
<dd>Why the heck do we need 5 styling elements? Basically, because there are 5 background-images to apply:
|
| 205 |
|
|
<ul>
|
| 206 |
|
|
<li><b>li:</b> A repeating vertical line is shown. Nested <li> tags
|
| 207 |
|
|
give us the multiple vertical lines that we need.</li>
|
| 208 |
|
|
<li><b>span.a:</b> We overlay the vertical line with 'L' and 'T' elements as needed.</li>
|
| 209 |
|
|
<li><b>span.b:</b> We overlay '+' or '-' signs on nodes with children.</li>
|
| 210 |
|
|
<li><b>span.c:</b> This is needed to fix up the vertical line.</li>
|
| 211 |
|
|
<li><b>a:</b> Finally, we apply the page icon.</li>
|
| 212 |
|
|
</ul>
|
| 213 |
|
|
</dd>
|
| 214 |
|
|
|
| 215 |
|
|
<dt>Opening / closing nodes</dt>
|
| 216 |
|
|
<dd>Having come this far, the "dynamic" aspect of the tree control is very trivial. We set a "closed"
|
| 217 |
|
|
class on the <li> and <span class="a"> elements, and our CSS takes care of hiding the
|
| 218 |
|
|
children, changing the - to a + and changing the folder icon.</dd>
|
| 219 |
|
|
</dl>
|
| 220 |
|
|
|
| 221 |
|
|
<div id="footer">
|
| 222 |
|
|
<div>
|
| 223 |
|
|
<p class="left"><a href="http://www.silverstripe.com/downloads/tree">SilverStripe Tree Control</a>: v0.1, 30 Oct 2005</p>
|
| 224 |
|
|
<p class="right">Copyright © 2005 <a href="http://www.silverstripe.com/blog">SilverStripe Limited</a></p>
|
| 225 |
|
|
</div>
|
| 226 |
|
|
</div>
|
| 227 |
|
|
</body>
|
| 228 |
|
|
</html>
|