Andreas Hocevar
123 lines
4.2 KiB
HTML
123 lines
4.2 KiB
HTML
<!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.dom');
|
|
goog.require('goog.events');
|
|
goog.require('goog.log');
|
|
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.log.Level.ALL);
|
|
var logger = goog.log.getLogger('demo');
|
|
var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
|
|
logconsole.setCapturing(true);
|
|
var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
|
|
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
|
function logEvent(name, e) {
|
|
goog.log.info(logger, '"' + 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>
|