<!DOCTYPE html>
<html>
<!--
Copyright 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.Css3ButtonRenderer Demo
</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.events');
goog.require('goog.log');
goog.require('goog.object');
goog.require('goog.ui.Css3ButtonRenderer');
goog.require('goog.ui.CustomButton');
goog.require('goog.ui.ToggleButton');
goog.require('goog.ui.decorate');
</script>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="../css/common.css">
<link rel="stylesheet" type="text/css" href="../css/css3button.css">
</head>
<body>
<h2>Demo of goog.ui.Css3ButtonRenderer</h2>
<fieldset>
<legend>
These buttons were rendered using
<strong>goog.ui.Css3ButtonRenderer</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">
<div id="foo" class="goog-css3-button" title="Title specified in HTML">
Decorated <b>Button</b>, yay!
</div><div id="bar" class="goog-css3-button goog-css3-button-disabled"
title="Initialized to DISABLED in HTML...">Decorated Disabled
</div><div id="fee" class="goog-css3-button">Another Button</div><div id="btn1"
class="goog-css3-button goog-css3-button-collapse-right">
Archive
</div><div id="btn2"
class="goog-css3-button goog-css3-button-collapse-right goog-css3-button-collapse-left">
Delete
</div><div id="btn3"
class="goog-css3-button goog-css3-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-css3-toggle-button"
title="Click here to enable/disable the button above">Enable</div>
<div id="hideShow"
class="goog-css3-toggle-button goog-css3-button-checked"
title="Click here to hide/show the button above">Show</div>
<br/><br/>
Combined toggle buttons<br/>
<div id="btn4" class="goog-css3-toggle-button goog-css3-button-collapse-right">
Bold
</div><div id="btn5" class="goog-css3-toggle-button goog-css3-button-collapse-right goog-css3-button-collapse-left">
Italics
</div><div id="btn6" class="goog-css3-toggle-button goog-css3-button-collapse-left goog-css3-button-checked">
Underlined
</div>
</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.log.setLevel(goog.log.getRootLogger(), 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 some buttons using CustomButton with the
// Css3ButtonRenderer renderer.
var disabledButton;
var customButtons = [
new goog.ui.CustomButton('Button',
goog.ui.Css3ButtonRenderer.getInstance()),
new goog.ui.CustomButton('Another Button',
goog.ui.Css3ButtonRenderer.getInstance()),
disabledButton = new goog.ui.CustomButton('Disabled Button',
goog.ui.Css3ButtonRenderer.getInstance()),
new goog.ui.CustomButton('Yet Another Button',
goog.ui.Css3ButtonRenderer.getInstance())
];
disabledButton.setEnabled(false);
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 buttons.
var cb2 = [];
var decoratedButtons = goog.array.map([
'foo', 'bar', 'fee', 'btn1', 'btn2', 'btn3', 'btn4', 'btn5', 'btn6'
], goog.dom.getElement);
goog.array.forEach(decoratedButtons, function(element) {
// Since the elements to be decorated each have the correct "marker" CSS
// class ("goog-css3-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());
});
goog.dom.setTextContent(goog.dom.getElement('perf'),
(goog.now() - timer) +'ms');
</script>
</body>
</html>
Codebase Browser
chromium