| <!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> |
