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