Andreas Hocevar
671 lines
23 KiB
HTML
671 lines
23 KiB
HTML
<!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.Container</title>
|
|
<script src="../base.js"></script>
|
|
<script>
|
|
goog.require('goog.array');
|
|
goog.require('goog.debug.DivConsole');
|
|
goog.require('goog.debug.LogManager');
|
|
goog.require('goog.dom');
|
|
goog.require('goog.events');
|
|
goog.require('goog.events.EventType');
|
|
goog.require('goog.log');
|
|
goog.require('goog.object');
|
|
goog.require('goog.style');
|
|
goog.require('goog.ui.Container');
|
|
goog.require('goog.ui.ContainerScroller');
|
|
goog.require('goog.ui.Control');
|
|
goog.require('goog.ui.CustomButton');
|
|
goog.require('goog.ui.Menu');
|
|
goog.require('goog.ui.MenuButton');
|
|
goog.require('goog.ui.Option');
|
|
goog.require('goog.ui.Select');
|
|
goog.require('goog.ui.Separator');
|
|
goog.require('goog.ui.ToggleButton');
|
|
</script>
|
|
<link rel="stylesheet" href="css/demo.css">
|
|
<link rel="stylesheet" href="../css/button.css">
|
|
<link rel="stylesheet" href="../css/menubutton.css">
|
|
<style>
|
|
/* Demo styles for goog.ui.Control. */
|
|
.goog-control {
|
|
position: relative;
|
|
margin: 2px;
|
|
border: 2px solid #036;
|
|
padding: 2px;
|
|
font: normal 9pt "Trebuchet MS", Tahoma, Arial, sans-serif;
|
|
color: #036;
|
|
background-color:#69c;
|
|
cursor: pointer;
|
|
outline: none !important;
|
|
}
|
|
|
|
.goog-control-disabled {
|
|
border-color: #888;
|
|
color: #888;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.goog-control-hover {
|
|
border-color: #369;
|
|
color: #369;
|
|
background-color: #9cf;
|
|
}
|
|
|
|
.goog-control-active,
|
|
.goog-control-selected,
|
|
.goog-control-checked {
|
|
border-color: #9cf;
|
|
color: #9cf;
|
|
background-color: #369;
|
|
}
|
|
|
|
.goog-control-focused {
|
|
border-color: orange;
|
|
}
|
|
|
|
/* Demo styles for goog.ui.Container */
|
|
.goog-container {
|
|
position: relative;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
background-color: #eee;
|
|
outline: none !important;
|
|
zoom: 1; /* The container element must have layout on IE. */
|
|
}
|
|
|
|
.goog-container-vertical {
|
|
width: 25ex;
|
|
border: 1px solid #888;
|
|
}
|
|
|
|
.goog-container-horizontal {
|
|
border-bottom: 1px solid #d5d5d5;
|
|
background: #fafafa url(../images/toolbar-bg.png) repeat-x bottom left;
|
|
}
|
|
|
|
/* Additional demo styles. */
|
|
|
|
.goog-month .goog-menu-button-caption {
|
|
width: 18ex;
|
|
}
|
|
|
|
.goog-year .goog-menu-button-caption {
|
|
width: 6ex;
|
|
}
|
|
|
|
.goog-edit-font .goog-menu-button-caption {
|
|
width: 15ex;
|
|
}
|
|
|
|
.goog-edit-font-size .goog-menu-button-caption {
|
|
width: 5ex;
|
|
}
|
|
|
|
.goog-edit-bold {
|
|
width: 14px;
|
|
background: url(../images/toolbar_icons.gif) no-repeat -1px;
|
|
}
|
|
|
|
.goog-edit-italic {
|
|
width: 14px;
|
|
background: url(../images/toolbar_icons.gif) no-repeat -17px;
|
|
}
|
|
|
|
.goog-edit-underline {
|
|
width: 14px;
|
|
background: url(../images/toolbar_icons.gif) no-repeat -33px;
|
|
}
|
|
|
|
#tb4_highlight_links span {
|
|
border: 1px solid #888;
|
|
cursor: pointer;
|
|
padding: 2px 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>goog.ui.Container</h2>
|
|
<p><b>goog.ui.Container</b> is a base class for menus and toolbars.</p>
|
|
<fieldset>
|
|
<legend>These containers were created programmatically:</legend>
|
|
<table border="0" cellpadding="8" cellspacing="0" width="100%">
|
|
<tbody>
|
|
<tr valign="top">
|
|
<td width="50%" id="vc">
|
|
Vertical container example:
|
|
</td>
|
|
<td width="50%" id="hc">
|
|
Horizontal container example:
|
|
</td>
|
|
</tr>
|
|
<tr valign="top">
|
|
<td>
|
|
<label>
|
|
Show vertical container:
|
|
<input type="checkbox" id="show_vc" checked>
|
|
</label>
|
|
|
|
<label>
|
|
Enable vertical container:
|
|
<input type="checkbox" id="enable_vc" checked>
|
|
</label>
|
|
<br>
|
|
<label>
|
|
Show Porthos:
|
|
<input type="checkbox" id="show_porthos" checked>
|
|
</label>
|
|
|
|
<label>
|
|
Enable Porthos:
|
|
<input type="checkbox" id="enable_porthos">
|
|
</label>
|
|
<br>
|
|
<label>
|
|
Enable transition events:
|
|
<input type="checkbox" id="enable_vc_events" checked>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<label>
|
|
Show horizontal container:
|
|
<input type="checkbox" id="show_hc" checked>
|
|
</label>
|
|
|
|
<label>
|
|
Enable horizontal container:
|
|
<input type="checkbox" id="enable_hc" checked>
|
|
</label>
|
|
<br>
|
|
<label>
|
|
Show Doc:
|
|
<input type="checkbox" id="show_doc" checked>
|
|
</label>
|
|
|
|
<label>
|
|
Enable Doc:
|
|
<input type="checkbox" id="enable_doc">
|
|
</label>
|
|
<br>
|
|
<label>
|
|
Enable transition events:
|
|
<input type="checkbox" id="enable_hc_events" checked>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<span class="hint">Try enabling and disabling containers with & without
|
|
state transition events, and compare performance!</span>
|
|
</fieldset>
|
|
<br>
|
|
<br>
|
|
<fieldset>
|
|
<legend>Non-focusable container with focusable controls:</legend>
|
|
In this case, the container itself isn't focusable, but each control is:<br>
|
|
<div id="nfc"></div>
|
|
</fieldset>
|
|
<br>
|
|
<br>
|
|
<fieldset>
|
|
<legend>Another horizontal container:</legend>
|
|
<label>
|
|
This is starting to look useful... Enable toolbar:
|
|
<input type="checkbox" id="enable_tb" checked>
|
|
</label>
|
|
<div id="tb"></div>
|
|
</fieldset>
|
|
<br>
|
|
<br>
|
|
<fieldset>
|
|
<legend>A decorated container:</legend>
|
|
<label>
|
|
It's much easier to decorate than to create programmatically...
|
|
Enable decorated toolbar:
|
|
<input type="checkbox" id="enable_tb2">
|
|
</label>
|
|
<div id="tb2" class="goog-container-horizontal goog-container-disabled">
|
|
<div id="month" class="goog-month goog-select">
|
|
Select month
|
|
<div class="goog-menu">
|
|
<div class="goog-option">January</div>
|
|
<div class="goog-option">February</div>
|
|
<div class="goog-option">March</div>
|
|
<div class="goog-option">April</div>
|
|
<div class="goog-option">May</div>
|
|
<div class="goog-option">June</div>
|
|
<div class="goog-option">July</div>
|
|
<div class="goog-option">August</div>
|
|
<div class="goog-option">September</div>
|
|
<div class="goog-option">October</div>
|
|
<div class="goog-option">November</div>
|
|
<div class="goog-option">December</div>
|
|
</div>
|
|
</div>
|
|
<div id="year" class="goog-year goog-select">
|
|
Year
|
|
<div class="goog-menu">
|
|
<div class="goog-option">2001</div>
|
|
<div class="goog-option">2002</div>
|
|
<div class="goog-option">2003</div>
|
|
<div class="goog-option">2004</div>
|
|
<div class="goog-option">2005</div>
|
|
<div class="goog-option">2006</div>
|
|
<div class="goog-option">2007</div>
|
|
<div class="goog-option">2008</div>
|
|
<div class="goog-option">2009</div>
|
|
<div class="goog-option">2010</div>
|
|
</div>
|
|
</div>
|
|
<div id="foo" class="goog-toggle-button">
|
|
Toggle Button
|
|
</div>
|
|
<div id="bar" class="goog-toggle-button">
|
|
<div><b><i>Fancy</i></b> Toggle Button</div>
|
|
</div>
|
|
<div id="fee" class="goog-toggle-button">
|
|
Another Button
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<br>
|
|
<br>
|
|
<fieldset>
|
|
<legend>The same container, right-to-left:</legend>
|
|
<label>
|
|
Show right-to-left toolbar:
|
|
<input type="checkbox" id="show_tb3" checked>
|
|
</label>
|
|
<label>
|
|
Enable right-to-left toolbar:
|
|
<input type="checkbox" id="enable_tb3">
|
|
</label>
|
|
<div id="tb3" class="goog-container-horizontal goog-container-disabled"
|
|
dir="rtl">
|
|
<div class="goog-month goog-select">
|
|
Select month
|
|
<div class="goog-menu" dir="rtl">
|
|
<div class="goog-option">January</div>
|
|
<div class="goog-option">February</div>
|
|
<div class="goog-option">March</div>
|
|
<div class="goog-option">April</div>
|
|
<div class="goog-option">May</div>
|
|
<div class="goog-option">June</div>
|
|
<div class="goog-option">July</div>
|
|
<div class="goog-option">August</div>
|
|
<div class="goog-option">September</div>
|
|
<div class="goog-option">October</div>
|
|
<div class="goog-option">November</div>
|
|
<div class="goog-option">December</div>
|
|
</div>
|
|
</div>
|
|
<div class="goog-year goog-select" dir="rtl">
|
|
Year
|
|
<div class="goog-menu">
|
|
<div class="goog-option">2001</div>
|
|
<div class="goog-option">2002</div>
|
|
<div class="goog-option">2003</div>
|
|
<div class="goog-option">2004</div>
|
|
<div class="goog-option">2005</div>
|
|
<div class="goog-option">2006</div>
|
|
<div class="goog-option">2007</div>
|
|
<div class="goog-option">2008</div>
|
|
<div class="goog-option">2009</div>
|
|
<div class="goog-option">2010</div>
|
|
</div>
|
|
</div>
|
|
<div class="goog-toggle-button">
|
|
Toggle Button
|
|
</div>
|
|
<div class="goog-toggle-button">
|
|
<div><b><i>Fancy</i></b> Toggle Button</div>
|
|
</div>
|
|
<div class="goog-toggle-button">
|
|
Another Button
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<br>
|
|
<br>
|
|
<fieldset>
|
|
<legend>A scrolling container:</legend>
|
|
<label>
|
|
This container scrolls so that the highlighted item is visible.
|
|
Here's a mix of block items and inline block items, which both work.
|
|
</label>
|
|
<p>
|
|
Put focus in the text box and use the arrow keys:
|
|
<input id="tb4_key_target">
|
|
</p>
|
|
<p>
|
|
Or quick jump to item:
|
|
<span id="tb4_highlight_links">
|
|
<span>0</span> <span>1</span> <span>2</span> <span>3</span>
|
|
<span>4</span> <span>5</span> <span>6</span> <span>7</span>
|
|
<span>8</span> <span>9</span> <span>10</span> <span>11</span>
|
|
<span>12</span> <span>13</span> <span>14</span> <span>15</span>
|
|
</span>
|
|
</p>
|
|
<div id="tb4" class="goog-container-vertical"
|
|
style="height: 100px; overflow-y: scroll">
|
|
<div class="goog-month goog-menuitem">menuitem 0</div>
|
|
<div class="goog-month goog-menuitem">menuitem 1</div>
|
|
<div class="goog-month goog-menuitem">menuitem 2</div>
|
|
<div class="goog-month goog-menuitem">menuitem 3</div>
|
|
<div class="goog-month goog-toggle-button">tog 4</div>
|
|
<div class="goog-month goog-toggle-button">tog 5</div>
|
|
<div class="goog-month goog-toggle-button">tog 6</div>
|
|
<div class="goog-month goog-toggle-button">toggley 7</div>
|
|
<div class="goog-month goog-toggle-button">toggley 8</div>
|
|
<div class="goog-month goog-toggle-button">toggley 9</div>
|
|
<div class="goog-month goog-toggle-button">toggley 10</div>
|
|
<div class="goog-month goog-toggle-button">toggley 11</div>
|
|
<div class="goog-month goog-toggle-button">toggley 12</div>
|
|
<div class="goog-month goog-toggle-button">toggley 13</div>
|
|
<div class="goog-month goog-menuitem">menuitem 14</div>
|
|
<div class="goog-month goog-menuitem">menuitem 15</div>
|
|
</div>
|
|
</fieldset>
|
|
<br>
|
|
<br>
|
|
<!-- Event log. -->
|
|
<fieldset class="goog-debug-panel">
|
|
<legend>Event Log</legend>
|
|
<div id="log"></div>
|
|
</fieldset>
|
|
<div id="perf"></div>
|
|
<script>
|
|
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 source =
|
|
typeof e.target.getCaption == 'function' && e.target.getCaption() ||
|
|
e.target.getId();
|
|
goog.log.info(logger, '"' + source + '" dispatched: ' + e.type);
|
|
}
|
|
|
|
// Programmatically create a vertical container.
|
|
var vc = new goog.ui.Container();
|
|
vc.setId('Vertical Container');
|
|
goog.array.forEach(
|
|
['Athos', 'Porthos', 'Aramis', 'd\'Artagnan'],
|
|
function(item) {
|
|
var c = new goog.ui.Control(item);
|
|
c.setId(item);
|
|
// For demo purposes, have controls dispatch transition events.
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
|
vc.addChild(c, true);
|
|
});
|
|
vc.addChildAt(new goog.ui.Separator(), 3, true);
|
|
vc.getChild('Porthos').setEnabled(false);
|
|
vc.render(goog.dom.getElement('vc'));
|
|
goog.events.listen(vc, EVENTS, logEvent);
|
|
|
|
// Hook up checkboxes.
|
|
goog.events.listen(goog.dom.getElement('show_vc'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var t = goog.now();
|
|
vc.setVisible(e.target.checked);
|
|
goog.log.info(logger, (e.target.checked ? 'Showed' : 'Hid') +
|
|
' vertical container in ' + (goog.now() - t) + 'ms');
|
|
});
|
|
goog.events.listen(goog.dom.getElement('enable_vc'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var t = goog.now();
|
|
vc.setEnabled(e.target.checked);
|
|
// If the container as a whole is disabled, you can't enable/disable
|
|
// child controls.
|
|
goog.dom.getElement('enable_porthos').disabled = !vc.isEnabled();
|
|
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
|
' vertical container in ' + (goog.now() - t) + 'ms');
|
|
});
|
|
goog.events.listen(goog.dom.getElement('show_porthos'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
vc.getChild('Porthos').setVisible(e.target.checked);
|
|
});
|
|
goog.events.listen(goog.dom.getElement('enable_porthos'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
vc.getChild('Porthos').setEnabled(e.target.checked);
|
|
});
|
|
goog.events.listen(goog.dom.getElement('enable_vc_events'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
vc.forEachChild(function(c) {
|
|
if (e.target.checked) {
|
|
// Enable all transition events.
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
|
} else {
|
|
// Disable all transition events (except for HOVER, which is used
|
|
// by containers internally).
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, false);
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.HOVER,
|
|
true);
|
|
}
|
|
});
|
|
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
|
' state transition events for this container\'s children');
|
|
});
|
|
|
|
// Programmatically create a horizontal container.
|
|
var hc = new goog.ui.Container(goog.ui.Container.Orientation.HORIZONTAL);
|
|
hc.setId('Horizontal Container');
|
|
|
|
// Pre-render the container, just to do something different.
|
|
hc.render(goog.dom.getElement('hc'));
|
|
goog.array.forEach(
|
|
['Happy', 'Sleepy', 'Doc', 'Bashful', 'Sneezy', 'Grumpy', 'Dopey'],
|
|
function(item) {
|
|
var c = new goog.ui.Control(item);
|
|
c.addClassName('goog-inline-block');
|
|
c.setId(item);
|
|
// For demo purposes, have controls dispatch transition events.
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
|
hc.addChild(c, true);
|
|
});
|
|
hc.getChild('Doc').setEnabled(false);
|
|
goog.events.listen(hc, EVENTS, logEvent);
|
|
|
|
// Hook up checkboxes.
|
|
goog.events.listen(goog.dom.getElement('show_hc'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var t = goog.now();
|
|
hc.setVisible(e.target.checked);
|
|
goog.log.info(logger, (e.target.checked ? 'Showed' : 'Hid') +
|
|
' horizontal container in ' + (goog.now() - t) + 'ms');
|
|
});
|
|
goog.events.listen(goog.dom.getElement('enable_hc'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var t = goog.now();
|
|
hc.setEnabled(e.target.checked);
|
|
// If the container as a whole is disabled, you can't enable/disable
|
|
// child controls.
|
|
goog.dom.getElement('enable_doc').disabled = !hc.isEnabled();
|
|
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
|
' horizontal container in ' + (goog.now() - t) + 'ms');
|
|
});
|
|
goog.events.listen(goog.dom.getElement('show_doc'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
hc.getChild('Doc').setVisible(e.target.checked);
|
|
});
|
|
goog.events.listen(goog.dom.getElement('enable_doc'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
hc.getChild('Doc').setEnabled(e.target.checked);
|
|
});
|
|
goog.events.listen(goog.dom.getElement('enable_hc_events'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
hc.forEachChild(function(c) {
|
|
if (e.target.checked) {
|
|
// Enable all transition events.
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
|
} else {
|
|
// Disable all transition events (except for HOVER, which is used
|
|
// by containers internally).
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, false);
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.HOVER,
|
|
true);
|
|
}
|
|
});
|
|
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
|
' state transition events for this container\'s children');
|
|
});
|
|
|
|
// Programmatically create a non-focusable container.
|
|
var nfc = new goog.ui.Container(goog.ui.Container.Orientation.HORIZONTAL);
|
|
nfc.setId('NonFocusableContainer');
|
|
nfc.setFocusable(false);
|
|
goog.array.forEach(['Vicky', 'Cristina', 'Barcelona'], function(item) {
|
|
var c = new goog.ui.Control(item);
|
|
c.setId(item);
|
|
c.addClassName('goog-inline-block');
|
|
// For demo purposes, have controls dispatch transition events.
|
|
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
|
nfc.addChild(c, /* opt_render */ true);
|
|
// Since the container itself is non-focusable, we need to make each
|
|
// child individually focusable; this has to happen *after* addChild().
|
|
// See e.g. bug http://b/1359754.
|
|
c.setSupportedState(goog.ui.Component.State.FOCUSED, true);
|
|
});
|
|
nfc.render(goog.dom.getElement('nfc'));
|
|
goog.events.listen(nfc, EVENTS, logEvent);
|
|
|
|
// Programmatically create a toolbar.
|
|
var tb = new goog.ui.Container(goog.ui.Container.Orientation.HORIZONTAL);
|
|
tb.setId('Toolbar');
|
|
|
|
// Programmatically create & add toolbar items.
|
|
var fontMenu = new goog.ui.Select('Select font');
|
|
fontMenu.setId('Font Menu');
|
|
fontMenu.setTooltip('Font');
|
|
fontMenu.addItem(new goog.ui.Option('Arial', 'Arial, sans-serif'));
|
|
fontMenu.addItem(new goog.ui.Option('Courier', 'Courier, monospace'));
|
|
fontMenu.addItem(new goog.ui.Option('Times', 'Times, serif'));
|
|
fontMenu.addClassName('goog-edit-font');
|
|
tb.addChild(fontMenu, true);
|
|
|
|
var sizeMenu = new goog.ui.Select(null);
|
|
sizeMenu.setId('Font Size Menu');
|
|
sizeMenu.setTooltip('Font Size');
|
|
sizeMenu.addItem(new goog.ui.Option('8pt'));
|
|
sizeMenu.addItem(new goog.ui.Option('10pt'));
|
|
sizeMenu.addItem(new goog.ui.Option('12pt'));
|
|
sizeMenu.addItem(new goog.ui.Option('16pt'));
|
|
sizeMenu.setSelectedIndex(1);
|
|
sizeMenu.addClassName('goog-edit-font-size');
|
|
tb.addChild(sizeMenu, true);
|
|
|
|
var boldButton = new goog.ui.ToggleButton(goog.dom.createDom('div',
|
|
'goog-edit-bold', '\u00A0'));
|
|
boldButton.setId('Bold Button');
|
|
boldButton.setTooltip('Bold');
|
|
tb.addChild(boldButton, true);
|
|
|
|
var italicButton = new goog.ui.ToggleButton(goog.dom.createDom('div',
|
|
'goog-edit-italic', '\u00A0'));
|
|
italicButton.setId('Italic Button');
|
|
italicButton.setTooltip('Italic');
|
|
tb.addChild(italicButton, true);
|
|
|
|
var underlineButton = new goog.ui.ToggleButton(goog.dom.createDom('div',
|
|
'goog-edit-underline', '\u00A0'));
|
|
underlineButton.setId('Underline Button');
|
|
underlineButton.setTooltip('Underline');
|
|
tb.addChild(underlineButton, true);
|
|
|
|
tb.render(goog.dom.getElement('tb'));
|
|
goog.events.listen(tb, EVENTS, logEvent);
|
|
|
|
// Hook up checkbox.
|
|
goog.events.listen(goog.dom.getElement('enable_tb'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var t = goog.now();
|
|
tb.setEnabled(e.target.checked);
|
|
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
|
' toolbar in ' + (goog.now() - t) + 'ms');
|
|
});
|
|
|
|
var tb2 = new goog.ui.Container();
|
|
tb2.decorate(goog.dom.getElement('tb2'));
|
|
goog.events.listen(tb2, EVENTS, logEvent);
|
|
|
|
// Hook up checkbox.
|
|
goog.events.listen(goog.dom.getElement('enable_tb2'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var t = goog.now();
|
|
tb2.setEnabled(e.target.checked);
|
|
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
|
' toolbar in ' + (goog.now() - t) + 'ms');
|
|
});
|
|
|
|
// BiDi container example:
|
|
var tb3 = new goog.ui.Container();
|
|
tb3.decorate(goog.dom.getElement('tb3'));
|
|
goog.events.listen(tb3, EVENTS, logEvent);
|
|
|
|
// Hook up checkboxes.
|
|
goog.events.listen(goog.dom.getElement('enable_tb3'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var t = goog.now();
|
|
tb3.setEnabled(e.target.checked);
|
|
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
|
' toolbar in ' + (goog.now() - t) + 'ms');
|
|
});
|
|
goog.events.listen(goog.dom.getElement('show_tb3'),
|
|
goog.events.EventType.CLICK,
|
|
function(e) {
|
|
var t = goog.now();
|
|
tb3.setVisible(e.target.checked);
|
|
goog.log.info(logger, (e.target.checked ? 'Showed' : 'Hid') +
|
|
' content element in ' + (goog.now() - t) + 'ms');
|
|
});
|
|
|
|
// Scrolling container.
|
|
var tb4 = new goog.ui.Container();
|
|
tb4.decorate(goog.dom.getElement('tb4'));
|
|
tb4.setKeyEventTarget(goog.dom.getElement('tb4_key_target'));
|
|
tb4.setFocusable(true);
|
|
new goog.ui.ContainerScroller(tb4);
|
|
|
|
goog.events.listen(goog.dom.getElement('tb4_highlight_links'),
|
|
goog.events.EventType.CLICK,
|
|
function(event) {
|
|
var index = parseInt(event.target.innerHTML, 10);
|
|
if (!isNaN(index)) {
|
|
tb4.getChildAt(index).setHighlighted(true);
|
|
}
|
|
});
|
|
|
|
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
|
(goog.now() - timer) + 'ms');
|
|
</script>
|
|
</body>
|
|
</html>
|