| <!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.SplitBehavior</title> |
| <script type="text/javascript" src="../base.js"></script> |
| <script type="text/javascript"> |
| goog.require('goog.array'); |
| goog.require('goog.debug.DivConsole'); |
| goog.require('goog.debug.LogManager'); |
| goog.require('goog.events'); |
| goog.require('goog.log'); |
| goog.require('goog.object'); |
| goog.require('goog.ui.Checkbox'); |
| goog.require('goog.ui.ColorButton'); |
| goog.require('goog.ui.ColorMenuButton'); |
| goog.require('goog.ui.ColorSplitBehavior'); |
| goog.require('goog.ui.CustomButton'); |
| goog.require('goog.ui.CustomButtonRenderer'); |
| goog.require('goog.ui.Menu'); |
| goog.require('goog.ui.MenuButton'); |
| goog.require('goog.ui.MenuButtonRenderer'); |
| goog.require('goog.ui.MenuItem'); |
| goog.require('goog.ui.SplitBehavior'); |
| </script> |
| |
| <link type="text/css" rel="stylesheet" href="css/demo.css"> |
| <link type="text/css" rel="stylesheet" href="../css/checkbox.css"> |
| <link type="text/css" rel="stylesheet" href="../css/colorbutton.css"> |
| <link type="text/css" rel="stylesheet" href="../css/colorpalette.css"> |
| <link type="text/css" rel="stylesheet" href="../css/colormenubutton.css"> |
| <link type="text/css" rel="stylesheet" href="../css/custombutton.css"> |
| <link type="text/css" rel="stylesheet" href="../css/menu.css"> |
| <link type="text/css" rel="stylesheet" href="../css/menubutton.css"> |
| <link type="text/css" rel="stylesheet" href="../css/menuitem.css"> |
| <link type="text/css" rel="stylesheet" href="../css/palette.css"> |
| |
| </head> |
| <body> |
| <h1>goog.ui.SplitBehavior</h1> |
| <fieldset> |
| <legend> |
| Split behavior - render |
| </legend> |
| <div id="split"></div> |
| <br> |
| <div id="split2"></div> |
| <br> |
| </fieldset> |
| |
| <fieldset> |
| <legend> |
| Split behavior - decorate |
| </legend> |
| <div id="split3" class="goog-split-behavior"> |
| <div class="goog-custom-button goog-inline-block goog-custom-button-collapse-right"> |
| Bold |
| </div |
| ><div id="menuButton" class="goog-menu-button goog-menu-button-collapse-left goog-inline-block" > |
| <div class="goog-menu"> |
| <div class="goog-menuitem">Bold</div> |
| <div class="goog-menuitem">Italic</div> |
| <div class="goog-menuitem">Underline</div> |
| </div> |
| </div> |
| </div> |
| </fieldset> |
| <fieldset> |
| <legend> |
| Color Split behavior |
| </legend> |
| <div id="split4"></div> |
| </fieldset> |
| <h2>goog.ui.ColorButton</h2> |
| <fieldset> |
| <legend> |
| These buttons were rendered using <strong>goog.ui.ColorButton</strong>: |
| |
| </legend> |
| <br/> |
| Rendered ColorButton: |
| <div id="colorbutton"></div> |
| <br/> |
| Decorated ColorButton: |
| <br/> |
| <div id="colorbutton2" class="goog-color-button">Color2</div> |
| <br/> |
| </fieldset> |
| |
| <!-- Event log. --> |
| <fieldset class="goog-debug-panel"> |
| <legend>Event Log</legend> |
| <div id="log" style="height: 200px;"></div> |
| </fieldset> |
| <script type="text/javascript"> |
| var timer = goog.now(); |
| |
| // 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(e) { |
| var component = e.target; |
| var caption = |
| (typeof component.getCaption == 'function') && component.getCaption(); |
| caption = goog.isDefAndNotNull(caption) ? caption : component.getId(); |
| goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type); |
| } |
| |
| // Create the first SplitBehavior. |
| var values = ['read', 'unread', 'archive']; |
| var button = new goog.ui.CustomButton(values[0]); |
| var menu = new goog.ui.Menu(); |
| goog.array.forEach(values, function(value) { |
| menu.addItem(new goog.ui.MenuItem(value)); |
| }) |
| var menuButton = new goog.ui.MenuButton(null, menu); |
| var s1 = new goog.ui.SplitBehavior(button, menuButton); |
| s1.render(goog.dom.getElement('split'), true); |
| goog.events.listen(button, EVENTS, logEvent); |
| goog.events.listen(menuButton, EVENTS, logEvent); |
| |
| // Create the second SplitBehavior. |
| var button2 = new goog.ui.CustomButton('apply'); |
| var checkbox = new goog.ui.Checkbox(true); |
| var s2 = new goog.ui.SplitBehavior(button2, checkbox, function(target, e) { |
| target.setEnabled(e.target.getChecked()); |
| }, goog.ui.Component.EventType.CHANGE); |
| s2.render(goog.dom.getElement('split2'), true); |
| goog.events.listen(button2, EVENTS, logEvent); |
| goog.events.listen(checkbox, EVENTS, logEvent); |
| |
| var s3 = goog.ui.decorate(goog.dom.getElement('split3')); |
| |
| var button3 = new goog.ui.ColorButton('Text'); |
| var s4 = new goog.ui.ColorSplitBehavior(button3); |
| s4.render(goog.dom.getElement('split4'), true); |
| goog.events.listen(button3, EVENTS, logEvent); |
| |
| // Render a simple color button. |
| var colorButton = new goog.ui.ColorButton('color') |
| colorButton.render(goog.dom.getElement('colorbutton')); |
| colorButton.setValue('green'); |
| goog.events.listen(colorButton, EVENTS, logEvent); |
| |
| // Decorate a color button |
| var colorButton2 = goog.ui.decorate(goog.dom.getElement('colorbutton2')); |
| colorButton2.setValue('blue'); |
| goog.events.listen(colorButton, EVENTS, logEvent); |
| goog.events.listen(colorButton2, EVENTS, logEvent); |
| </script> |
| </body> |
| </html> |
