| <!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.Button and goog.ui.ToggleButton</title> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.array'); |
| goog.require('goog.debug.DivConsole'); |
| goog.require('goog.debug.LogManager'); |
| goog.require('goog.events'); |
| goog.require('goog.events.EventType'); |
| goog.require('goog.log'); |
| goog.require('goog.object'); |
| goog.require('goog.ui.Button'); |
| goog.require('goog.ui.ButtonRenderer'); |
| goog.require('goog.ui.ButtonSide'); |
| goog.require('goog.ui.CustomButton'); |
| goog.require('goog.ui.CustomButtonRenderer'); |
| goog.require('goog.ui.FlatButtonRenderer'); |
| goog.require('goog.ui.LinkButtonRenderer'); |
| goog.require('goog.ui.ToggleButton'); |
| goog.require('goog.ui.decorate'); |
| </script> |
| <link rel="stylesheet" href="css/demo.css"> |
| <link rel="stylesheet" href="../css/button.css"> |
| <link rel="stylesheet" href="../css/custombutton.css"> |
| <link rel="stylesheet" href="../css/flatbutton.css"> |
| <link rel="stylesheet" href="../css/linkbutton.css"> |
| <style> |
| /* Base class for all icon elements. */ |
| .icon { |
| height: 16px; |
| width: 16px; |
| margin: 0 1px; |
| background-image: url(../images/toolbar_icons.gif); |
| background-repeat: no-repeat; |
| vertical-align: middle; |
| } |
| |
| /* "Highlight" icon. */ |
| .highlight-icon{ |
| background-position: -64px; |
| } |
| |
| /* "Insert Image" icon. */ |
| .insert-image-icon { |
| background-position: -80px; |
| } |
| |
| /* Custom style for the "default" button. */ |
| .default-button { |
| font-weight: bold; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>goog.ui.Button</h1> |
| <fieldset> |
| <legend> |
| The first <strong>Button</strong> was created programmatically, |
| the second by decorating an <strong><input></strong> element: |
| </legend> |
| <div id="b1"></div> |
| <label> |
| Enable button:<input type="checkbox" id="b1_enable" checked/> |
| </label> |
| <br/> |
| <br/> |
| <input type="button" id="b2" title="Tooltip extracted from title" |
| value="My Button" disabled="true"/><br/> |
| <label>Enable button:<input type="checkbox" id="b2_enable"/></label> |
| <br/> |
| </fieldset> |
| <br/> |
| |
| <h2>goog.ui.FlatButtonRenderer</h2> |
| <fieldset> |
| <legend> |
| Buttons made with <strong><div></strong>'s instead of |
| <strong><input></strong>'s or <strong><button></strong>'s |
| The first rendered, the second decorated: |
| </legend> |
| <div id="fb1"></div> |
| <label> |
| Enable button:<input type="checkbox" id="fb1_enable" checked/> |
| </label> |
| <br/> |
| <br/> |
| <div id="fb2" class="goog-flat-button goog-flat-button-disabled" |
| title="Tooltip extracted from title">My Flat Button</div><br/> |
| <label>Enable button:<input type="checkbox" id="fb2_enable"/></label> |
| <br/> |
| <br/> |
| <div id="fb3" class="goog-flat-button goog-flat-button-collapse-right"> |
| Combined |
| </div><div id="fb4" class="goog-flat-button goog-flat-button-collapse-left"> |
| Buttons |
| </div> |
| <br/> |
| </fieldset> |
| <br/> |
| |
| <h2>goog.ui.LinkButtonRenderer</h2> |
| <fieldset> |
| <legend> |
| Like FlatButtonRenderer, except the style makes the button appear to be a |
| link. |
| </legend> |
| <div id="lb"></div> |
| <label> |
| Enable button:<input type="checkbox" id="lb_enable" checked/> |
| </label> |
| </fieldset> |
| |
| <h2>goog.ui.CustomButton & goog.ui.ToggleButton</h2> |
| <fieldset> |
| <legend> |
| These buttons were rendered using <strong>goog.ui.CustomButton</strong>: |
| |
| </legend> |
| <br/> |
| These buttons were created programmatically:<br/> |
| <div id="cb1"></div> |
| <br/> |
| These buttons were created by decorating some DIVs, and they dispatch |
| state transition events (watch the event log):<br/> |
| <div id="cb2"> |
| <!-- On FF2, if you don't enclose the contents of the button in a SPAN, |
| the bold element isn't rendered. Works on every other browser. --> |
| <div id="foo" class="goog-custom-button" title="Title specified in HTML"> |
| <span>Decorated <b>Button</b>, yay!</span> |
| </div> |
| <div id="bar" class="goog-custom-button goog-custom-button-disabled" |
| title="Initialized to DISABLED in HTML...">Decorated Disabled</div> |
| <div id="fee" class="goog-custom-button">Another Button</div> |
| <div id="btn1" |
| class="goog-custom-button goog-custom-button-collapse-right"> |
| Archive |
| </div><div id="btn2" class="goog-custom-button goog-custom-button-collapse-right goog-custom-button-collapse-left"> |
| Delete |
| </div><div id="btn3" |
| class="goog-custom-button goog-custom-button-collapse-left"> |
| Report Spam |
| </div> |
| </div> |
| <br/> |
| Use these <strong>ToggleButton</strong>s to hide/show and enable/disable |
| the middle button:<br/> |
| <div id="toggleEnable" class="goog-toggle-button" |
| title="Click here to enable/disable the button above">Enable</div> |
| |
| <div id="hideShow" |
| class="goog-toggle-button goog-custom-button-checked" |
| title="Click here to hide/show the button above">Show</div> |
| <br/><br/> |
| Combined toggle buttons:<br/> |
| <div id="btn4" class="goog-toggle-button goog-custom-button-collapse-right"> |
| Bold |
| </div><div id="btn5" class="goog-toggle-button goog-custom-button-collapse-right goog-custom-button-collapse-left"> |
| Italics |
| </div><div id="btn6" class="goog-toggle-button goog-custom-button-collapse-left goog-custom-button-checked"> |
| Underlined |
| </div> |
| <br/> |
| <br/> |
| These buttons have icons, and the second one has an extra CSS class:<br/> |
| <div id="iconbuttons"></div> |
| <br/> |
| <span class="hint"> |
| The button with the <span style="font-weight:bold;color:orange;">orange |
| outline</span> has keyboard focus. Hit Enter to activate focused buttons. |
| </span> |
| </fieldset> |
| <br/> |
| <div id="perf"></div> |
| <!-- Event log. --> |
| <fieldset class="goog-debug-panel"> |
| <legend>Event Log</legend> |
| <div id="log"></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) { |
| goog.log.info(logger, '"' + e.target.getCaption() + '" dispatched: ' + e.type); |
| } |
| |
| // Create the first button programmatically. |
| var b1 = new goog.ui.Button('Hello!'); |
| b1.render(goog.dom.getElement('b1')); |
| b1.setTooltip('I changed the tooltip using setTooltip() ' + |
| 'after the button was rendered.'); |
| goog.events.listen(b1, EVENTS, logEvent); |
| |
| goog.events.listen(goog.dom.getElement('b1_enable'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| b1.setEnabled(e.target.checked); |
| }); |
| |
| goog.events.listen(b1, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var newCaption = window.prompt('Enter new caption for button:'); |
| b1.setCaption(newCaption || 'Empty'); |
| }); |
| |
| // Create the second button by decorating an element. |
| var b2 = new goog.ui.Button(); |
| b2.decorate(goog.dom.getElement('b2')); |
| goog.events.listen(b2, EVENTS, logEvent); |
| |
| goog.events.listen(goog.dom.getElement('b2_enable'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| b2.setEnabled(e.target.checked); |
| }); |
| |
| goog.events.listen(b2, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| alert('The value of the button is: ' + b2.getValue()); |
| }); |
| |
| |
| // Create flat buttons that use divs instead of button or input elements. |
| // Render 1st flat button. |
| var fb1 = new goog.ui.Button('Hello!', |
| goog.ui.FlatButtonRenderer.getInstance()); |
| fb1.render(goog.dom.getElement('fb1')); |
| fb1.setTooltip('I changed the tooltip using setTooltip() ' + |
| 'after the button was rendered.'); |
| goog.events.listen(fb1, EVENTS, logEvent); |
| |
| goog.events.listen(goog.dom.getElement('fb1_enable'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| fb1.setEnabled(e.target.checked); |
| }); |
| |
| goog.events.listen(fb1, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var newCaption = window.prompt('Enter new caption for button:'); |
| fb1.setCaption(newCaption || 'Empty'); |
| }); |
| |
| // Decorate 2nd flat button. |
| var fb2 = goog.ui.decorate(goog.dom.getElement('fb2')); |
| goog.events.listen(fb2, EVENTS, logEvent); |
| |
| goog.events.listen(goog.dom.getElement('fb2_enable'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| fb2.setEnabled(e.target.checked); |
| }); |
| |
| goog.events.listen(fb2, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| alert('The caption of the button is: ' + fb2.getCaption()); |
| }); |
| |
| // Decorate 3rd and 4th flat buttons. |
| goog.ui.decorate(goog.dom.getElement('fb3')); |
| goog.ui.decorate(goog.dom.getElement('fb4')); |
| |
| // Create buttons that look like links. |
| var lb = new goog.ui.Button('Hello!', |
| goog.ui.LinkButtonRenderer.getInstance()); |
| lb.render(goog.dom.getElement('lb')); |
| lb.setTooltip('I changed the tooltip using setTooltip() ' + |
| 'after the button was rendered.'); |
| goog.events.listen(lb, EVENTS, logEvent); |
| |
| goog.events.listen(goog.dom.getElement('lb_enable'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| lb.setEnabled(e.target.checked); |
| }); |
| |
| goog.events.listen(lb, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var newCaption = window.prompt('Enter new caption for button:'); |
| lb.setCaption(newCaption || 'Empty'); |
| }); |
| |
| // Create some custom buttons. |
| var disabledButton, leftButton, centerButton, rightButton; |
| var customButtons = [ |
| new goog.ui.CustomButton('Button'), |
| new goog.ui.CustomButton('Another Button'), |
| disabledButton = new goog.ui.CustomButton('Disabled Button'), |
| new goog.ui.CustomButton('Yet Another Button'), |
| leftButton = new goog.ui.CustomButton('Left'), |
| centerButton = new goog.ui.CustomButton('Center'), |
| rightButton = new goog.ui.CustomButton('Right'), |
| ]; |
| disabledButton.setEnabled(false); |
| leftButton.setCollapsed(goog.ui.ButtonSide.END); |
| centerButton.setCollapsed(goog.ui.ButtonSide.BOTH); |
| rightButton.setCollapsed(goog.ui.ButtonSide.START); |
| goog.array.forEach(customButtons, function(b) { |
| b.render(goog.dom.getElement('cb1')); |
| goog.events.listen(b, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var newCaption = window.prompt('Enter new caption for button:'); |
| b.setCaption(newCaption || 'Empty'); |
| }); |
| goog.events.listen(b, EVENTS, logEvent); |
| }); |
| |
| // Decorate some custom buttons. |
| var cb2 = []; |
| var decoratedButtons = goog.array.map( |
| ['foo', 'bar', 'fee', 'btn1', 'btn2', 'btn3'], |
| goog.dom.getElement); |
| goog.array.forEach(decoratedButtons, function(element) { |
| // Since the elements to be decorated each have the correct "marker" CSS |
| // class ("goog-custom-button"), we can use the renderer registry to get |
| // the appropriate control instance to decorate them. |
| var button = goog.ui.decorate(element); |
| button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true); |
| cb2.push(button); |
| goog.events.listen(button, EVENTS, logEvent); |
| }); |
| |
| // Decorate toggle buttons. |
| var toggleEnableElem = goog.dom.getElement('toggleEnable'); |
| var toggleEnable = goog.ui.decorate(toggleEnableElem); |
| toggleEnable.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true); |
| goog.events.listen(toggleEnable, EVENTS, logEvent); |
| |
| goog.events.listen(toggleEnable, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| cb2[1].setEnabled(e.target.isChecked()); |
| }); |
| |
| var hideShowElem = goog.dom.getElement('hideShow'); |
| var hideShow = new goog.ui.decorate(hideShowElem); |
| hideShow.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true); |
| goog.events.listen(hideShow, EVENTS, logEvent); |
| |
| goog.events.listen(hideShow, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| cb2[1].setVisible(e.target.isChecked()); |
| }); |
| |
| // Decorate combined toggle buttons. |
| var cb3 = []; |
| var combinedButtons = goog.array.map(['btn4', 'btn5', 'btn6'], |
| goog.dom.getElement); |
| goog.array.forEach(combinedButtons, function(element) { |
| var button = goog.ui.decorate(element); |
| button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true); |
| cb3.push(button); |
| goog.events.listen(button, EVENTS, logEvent); |
| }); |
| |
| |
| // Use a DIV with a background image as the icon, and a SPAN as the caption. |
| var iconbutton1 = new goog.ui.ToggleButton([ |
| goog.dom.createDom('div', 'icon insert-image-icon goog-inline-block'), |
| goog.dom.createDom('span', {'style': 'vertical-align:middle'}, |
| 'Insert Image') |
| ]); |
| iconbutton1.render(goog.dom.getElement('iconbuttons')); |
| goog.events.listen(iconbutton1, EVENTS, logEvent); |
| |
| // Add a custom style, too. |
| var iconbutton2 = new goog.ui.ToggleButton([ |
| goog.dom.createDom('div', 'icon highlight-icon goog-inline-block'), |
| goog.dom.createDom('span', {'style': 'vertical-align:middle'}, |
| 'Highlight Text') |
| ]); |
| iconbutton2.addClassName('default-button'); |
| iconbutton2.render(goog.dom.getElement('iconbuttons')); |
| goog.events.listen(iconbutton2, EVENTS, logEvent); |
| |
| goog.dom.setTextContent(goog.dom.getElement('perf'), |
| (goog.now() - timer) + 'ms'); |
| </script> |
| </body> |
| </html> |
