diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/button.html')
| -rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/button.html | 395 |
1 files changed, 0 insertions, 395 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/button.html b/contexts/data/lib/closure-library/closure/goog/demos/button.html deleted file mode 100644 index 8cb1fd1..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/button.html +++ /dev/null @@ -1,395 +0,0 @@ -<!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.debug.Logger'); - goog.require('goog.events'); - goog.require('goog.events.EventType'); - 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.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(e) { - logger.info('"' + 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> |