|
1
|
<!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>
|
