1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<? defined("SYSPATH") or die("No direct script access."); ?>
<div id="gSidebar" class="yui-b">
<div id="gAlbumTree">
<h2>Album Navigation</h2>
<div id="gTreeContainer"><!-- there might be a better way to make this accessible to the JS -->
<ul>
<li>Gallery
<ul>
<li>Friends & Family
<ul>
<li>Christmas 2006</li>
<li>Family Reunion</li>
<li>Christmas 2007</li>
</ul>
</li>
<li>Vactions
<ul>
<li>Cuba</li>
<li>Europe</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree;
//anonymous function wraps the remainder of the logic:
(function() {
//function to initialize the tree:
function treeInit() {
buildRandomTextNodeTree();
}
//Function creates the tree and
//builds between 3 and 7 children of the root node:
function buildRandomTextNodeTree() {
//instantiate the tree:
tree = new YAHOO.widget.TreeView("gTreeContainer");
// Expand and collapse happen prior to the actual expand/collapse,
// and can be used to cancel the operation
tree.subscribe("expand", function(node) {
YAHOO.log(node.index + " was expanded", "info", "example");
// return false; // return false to cancel the expand
});
tree.subscribe("collapse", function(node) {
YAHOO.log(node.index + " was collapsed", "info", "example");
});
// Trees with TextNodes will fire an event for when the label is clicked:
tree.subscribe("labelClick", function(node) {
YAHOO.log(node.index + " label was clicked", "info", "example");
});
//The tree is not created in the DOM until this method is called:
tree.draw();
}
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<table class="gMetadata">
<caption><h2>Album Info</h2></caption>
<tbody>
<tr>
<th>Name:</th>
<td><strong>Christmas 2007</strong></td>
</tr>
<tr>
<th>Taken:</th>
<td><span class="date" title="January 21, 2008 8:30pm">January 21, 2008</td>
</tr>
<tr>
<th>Location:</th>
<td><a href="#" title="see the location on a map">Mountain View</a></td>
</tr>
<tr>
<th>Owner:</th>
<td><a href="#">username</a></td>
</tr>
<tr>
<th>Uploaded:</th>
<td><span class="date" title="October 23, 2008 11:37am">October 23, 2008</td>
</tr>
</tbody>
</table>
<div class="gTagCloud">
<h2>Tag cloud</h2>
<ul>
<li><a href="#" class="m size0">animation</a></li>
<li><a href="#" class="m size0">art</a></li>
<li><a href="#" class="m size1">blind</a></li>
<li><a href="#" class="m size3">blog</a></li>
<li><a href="#" class="m size1">bug-tracker</a></li>
<li><a href="#" class="m size2">bugs20</a></li>
<li><a href="#" class="m size0">canvas</a></li>
<li><a href="#" class="m size0">classification</a></li>
<li><a href="#" class="m size4">cocktail</a></li>
<li><a href="#" class="m size0">exhibtion</a></li>
<li><a href="#" class="m size0">forum</a></li>
<li><a href="#" class="m size1">geo-tagging</a></li>
<li><a href="#" class="m size0">german</a></li>
<li><a href="#" class="m size0">germany</a></li>
<li><a href="#" class="m size0">gl�ser</a></li>
<li><a href="#" class="m size0">graffiti</a></li>
<li><a href="#" class="m size0">illustration</a></li>
<li><a href="#" class="m size0">ITP</a></li>
<li><a href="#" class="m size0">javascript</a></li>
<li><a href="#" class="m size0">miami</a></li>
<li><a href="#" class="m size0">miknow</a></li>
<li><a href="#" class="m size0">nyc</a></li>
<li><a href="#" class="m size0">NYU</a></li>
<li><a href="#" class="m size0">ontology</a></li>
<li><a href="#" class="m size0">open-source</a></li>
<li><a href="#" class="m size0">project</a></li>
<li><a href="#" class="m size0">school-of-information</a></li>
<li><a href="#" class="m size0">screenshot</a></li>
<li><a href="#" class="m size0">shiftspace</a></li>
<li><a href="#" class="m size0">shop</a></li>
<li><a href="#" class="m size0">tagging</a></li>
<li><a href="#" class="m size2">talkingpoints</a></li>
<li><a href="#" class="m size0">university-of-michigan</a></li>
<li><a href="#" class="m size1">usability</a></li>
<li><a href="#" class="m size0">writing</a></li>
</ul>
</div>
</div>
|
