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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>YUI 3 gallery treeview test</title>
<link type="text/css" rel="stylesheet"
href="../../build/lazr/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript"
src="../../build/yui/yui.js"></script>
<script type="text/javascript"
src="../../build/lazr/treeview/treeview.js"></script>
<script type="text/javascript">
YUI({
modules: {
'gallery-port': {
fullpath:
'../../build/yui-gallery/gallery-port/gallery-port.js',
requires: ['base','node']
},
'lazr.treeview': {
fullpath: '../../build/lazr/treeview/treeview.js',
requires: ['gallery-port']
}
},
filter: 'raw'
}).use('lazr.treeview', function(Y) {
//Creating the local YAHOO copy
var YAHOO = Y.Port(),
Lang = YAHOO.lang,
Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
//global variable to allow console inspection of tree:
var tree1, tree2;
var makeBranch = function (parent,label) {
label = label || '';
var n = Math.random() * (6 - (label.length || 0));
for (var i = 0;i < n;i++) {
var tmpNode = new YAHOO.widget.TextNode('label' +
label + '-' + i, parent, Math.random() > .5);
makeBranch(tmpNode,label + '-' + i);
}
}
var treeInit = function() {
tree1 = new YAHOO.widget.TreeView("treeDiv1");
makeBranch(tree1.getRoot());
tree1.setNodesProperty('propagateHighlightUp', true);
tree1.setNodesProperty('propagateHighlightDown', true);
tree1.on('clickEvent', tree1.onEventToggleHighlight);
tree1.render();
Y.on('click', function() {
var hiLit = tree1.getNodesByProperty('highlightState',
1);
if (YAHOO.lang.isNull(hiLit)) {
Y.log("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
labels.push(hiLit[i].label);
}
Y.log("Highlighted nodes:\n" + labels.join("\n"),
"info", "example");
}
}, '#logHilit');
tree2 = new YAHOO.widget.TreeView("treeDiv2");
makeBranch(tree2.getRoot());
tree2.singleNodeHighlight = true;
tree2.on('clickEvent',tree2.onEventToggleHighlight);
tree2.render();
};
// Add a handler to build the tree when the document is ready
Y.on('domready', treeInit);
});
</script>
</head>
<body class="yui-skin-sam">
<h3>Tree with highlight propagation and 'checkbox' skin</h3>
<div id="treeDiv1" class="whitebg ygtv-checkbox"></div>
<button id="logHilit">Log selected</button>
<hr/>
<h3>Tree with single node highlighting and simple skin</h3>
<div id="treeDiv2" class="whitebg ygtv-highlight"></div>
<div id="msg">msg</div>
</body>
</html>
|