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
|
<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>goog.ui.Checkbox</title>
<script src="../base.js"></script>
<script>
goog.require('goog.debug.DivConsole');
goog.require('goog.debug.LogManager');
goog.require('goog.debug.Logger');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.ui.Checkbox');
goog.require('goog.ui.Checkbox.State');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/checkbox.css">
</head>
<body>
<h1>goog.ui.Checkbox</h1>
<p>This is a tri-state checkbox.</p>
<div>
<span id="enable" class="goog-checkbox-checked"></span>Enable/disable</div>
<br>
<div><span id="all" class="goog-checkbox-undetermined"></span>root</div>
<div style="margin-left: 1em;">
<div><span id="leaf1" class="goog-checkbox-checked"></span>leaf 1</div>
<div><span id="leaf2"></span>leaf 2</div>
</div>
<br>
<div id="render">
Created with render
</div>
<br>
<div id="decorate">
Created with decorate
<span class="goog-checkbox"></span>
<span class="goog-checkbox goog-checkbox-checked"></span>
<span class="goog-checkbox goog-checkbox-undetermined"></span>
<span class="goog-checkbox goog-checkbox-disabled"></span>
</div>
<br><br>
<!-- Event log. -->
<fieldset class="goog-debug-panel">
<legend>Event Log for 'root', 'leaf1', 'leaf2'</legend>
<div id="log" style="height: 500px"></div>
</fieldset>
<script type="text/javascript">
// Set up a logger.
goog.debug.LogManager.getRoot().setLevel(goog.debug.Logger.Level.ALL);
var logger = goog.debug.Logger.getLogger('demo');
var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
logconsole.setCapturing(true);
var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
logger.fine('Listening for: ' + EVENTS.join(', ') + '.');
function logEvent(name, e) {
logger.info('"' + name + '" dispatched: ' + e.type);
}
var all = new goog.ui.Checkbox();
all.decorate(goog.dom.getElement('all'));
all.setLabel(all.getElement().parentNode);
goog.events.listen(all, EVENTS, goog.partial(logEvent, 'root'));
var leaf1 = new goog.ui.Checkbox();
leaf1.decorate(goog.dom.getElement('leaf1'));
leaf1.setLabel(leaf1.getElement().parentNode);
goog.events.listen(leaf1, EVENTS, goog.partial(logEvent, 'leaf1'));
var leaf2 = new goog.ui.Checkbox();
leaf2.decorate(goog.dom.getElement('leaf2'));
leaf2.setLabel(leaf2.getElement().parentNode);
goog.events.listen(leaf2, EVENTS, goog.partial(logEvent, 'leaf2'));
var enable = new goog.ui.Checkbox();
enable.setLabel(goog.dom.getElement('enable').parentNode);
enable.decorate(goog.dom.getElement('enable'));
var states = [false, true, null];
goog.array.forEach(states, function(state) {
new goog.ui.Checkbox(state).render(goog.dom.getElement('render'));
});
var checkbox = new goog.ui.Checkbox();
checkbox.render(goog.dom.getElement('render'));
checkbox.setEnabled(false);
var decorateNodes = goog.dom.getElementsByTagNameAndClass('span', null,
goog.dom.getElement('decorate'));
for (var i = 0, len = decorateNodes.length; i < len; i++) {
goog.ui.decorate(decorateNodes[i]);
}
function rootChanged(e) {
leaf1.setChecked(all.getChecked());
leaf2.setChecked(all.getChecked());
}
function leafChanged(e) {
var same = leaf1.getChecked() == leaf2.getChecked();
all.setChecked(same ? leaf1.getChecked() :
goog.ui.Checkbox.State.UNDETERMINED);
}
function enableTree(enable) {
all.setEnabled(enable);
leaf1.setEnabled(enable);
leaf2.setEnabled(enable);
}
goog.events.listen(all, goog.ui.Component.EventType.CHANGE, rootChanged);
goog.events.listen(leaf1, goog.ui.Component.EventType.CHANGE, leafChanged);
goog.events.listen(leaf2, goog.ui.Component.EventType.CHANGE, leafChanged);
goog.events.listen(enable, goog.ui.Component.EventType.CHANGE,
function() { enableTree(enable.getChecked()); });
</script>
</body>
</html>
|
