chao
/
mini_cocopi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
							<!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.Toolbar</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.Button');
    goog.require('goog.ui.ButtonSide');
    goog.require('goog.ui.Component.EventType');
    goog.require('goog.ui.Component.State');
    goog.require('goog.ui.Menu');
    goog.require('goog.ui.MenuItem');
    goog.require('goog.ui.Option');
    goog.require('goog.ui.SelectionModel');
    goog.require('goog.ui.Separator');
    goog.require('goog.ui.Toolbar');
    goog.require('goog.ui.ToolbarButton');
    goog.require('goog.ui.ToolbarMenuButton');
    goog.require('goog.ui.ToolbarRenderer');
    goog.require('goog.ui.ToolbarSelect');
    goog.require('goog.ui.ToolbarSeparator');
    goog.require('goog.ui.ToolbarToggleButton');
    goog.require('goog.dom.TagName');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/menu.css">
  <link rel="stylesheet" href="../css/menuitem.css">
  <link rel="stylesheet" href="../css/menuseparator.css">
  <link rel="stylesheet" href="../css/toolbar.css">
  <style>
    /*
     * Sample toolbar styles.
     */

    /* Base class for all icon elements. */
    .icon {
      height: 16px;
      width: 16px;
      background-image: url(../images/toolbar_icons.gif);
      background-repeat: no-repeat;
      vertical-align: middle;
    }

    /* Font select. */
    .goog-edit-font .goog-toolbar-menu-button-caption {
      color: #246;
      width: 15ex;
      overflow: hidden;
    }

    /* Font select options. */
    .goog-edit-font-normal {
      font-family: Arial, sans-serif;
    }
    .goog-edit-font-times {
      font-family: Times, serif;
    }
    .goog-edit-font-courier {
      font-family: "Courier New", Courier, monospace;
    }
    .goog-edit-font-georgia {
      font-family: Georgia, serif;
    }
    .goog-edit-font-trebuchet {
      font-family: "Trebuchet MS", sans-serif;
    }
    .goog-edit-font-verdana {
      font-family: Verdana, sans-serif;
    }

    /* Font size. */
    .goog-edit-font-size .goog-toolbar-menu-button-caption {
      color: #246;
      width: 5ex;
    }

    /* Bold. */
    .goog-edit-bold {
      background-position: 0;
    }

    /* Italic. */
    .goog-edit-italic {
      background-position: -16px;
    }

    /* Underline. */
    .goog-edit-underline {
      background-position: -32px;
    }

    /* Color. */
    .goog-edit-color {
      background-position: -48px;
    }

    /* Background color. */
    .goog-edit-background {
      background-position: -64px;
    }

    /* Menu buttons. */
    .goog-edit-style,
    .goog-edit-insert,
    .goog-edit-link,
    .goog-edit-spellcheck {
      font-weight: bold;
      color: #246;
    }

    /* Link. */
    .goog-edit-link {
      color: #009;
      text-decoration: underline;
    }

    /* Insert menu. */
    .goog-edit-insert-icon {
      background-position: -80px;
      vertical-align: bottom;
    }
    .goog-edit-insert-caption {
      padding: 0 2px;
      vertical-align: bottom;
    }

    /* List style menu. */
    .goog-edit-list-style {
      background-position: -96px;
    }

    /* Text alignment buttons. */
    .goog-edit-align-left {
      background-position: -128px;
    }
    .goog-edit-align-center {
      background-position: -144px;
    }
    .goog-edit-align-right {
      background-position: -160px;
    }

    /*
     * Menu styles, overriding those in menus.css to make these menus a little
     * more like the CCC editor UI design.
     */

    .goog-menu {
      position: absolute;
      margin: 0;
      border-width: 1px;
      border-style: solid;
      border-color: #ccc #999 #999 #ccc;
      padding: 0;
      font: normal 10pt Arial, sans-serif;
      color: #000;
      background-color: #fff;
      cursor: default;
      outline: none;
    }

    .goog-menuitem {
      margin: 0;
      border: 0;
      padding: 4px 32px 4px 4px;
      color: #000;
      background-color: #fff;
      list-style: none;
    }

    .goog-menuitem-disabled {
      color: #999;
    }

    .goog-menuitem-highlight {
      background-color: #e8eef7 !important;
    }

    .goog-menuseparator {
      position: relative;
      margin: 2px 0;
      border-top: 1px solid #999;
      padding: 0;
      outline: none;
    }
  </style>
</head>
<body>
  <h2>goog.ui.Toolbar</h2>
  <fieldset>
    <legend>These toolbars were created programmatically:</legend>
    <label>
      Show toolbar:
      <input id="t1_show" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Enable toolbar:
      <input id="t1_enable" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Enable last button:
      <input id="toggleButton_enable" type="checkbox" checked>
    </label>
    <br>
    <br>
    <div id="t1"></div>
    <br>
    <div id="perf1" class="perf"></div>
    <br>
    <label>
      Show right-to-left toolbar:
      <input id="t1rtl_show" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Enable right-to-left toolbar:
      <input id="t1rtl_enable" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Enable last button:
      <input id="rtlToggleButton_enable" type="checkbox" checked>
    </label>
    <br>
    <br>
    <div id="t1rtl" dir="rtl"></div>
    <br>
    <div id="perf1rtl" class="perf"></div>
  </fieldset>
  <br>
  <br>
  <fieldset>
    <legend>This toolbar was created by decorating a bunch of DIVs:</legend>
    <label>
      Show toolbar:
      <input id="t2_show" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Enable toolbar:
      <input id="t2_enable" type="checkbox">
    </label>
    &nbsp;
    <label>
      Enable menu button:
      <input id="menuButton_enable" type="checkbox" checked>
    </label>
    <br>
    <br>
    <div id="t2" class="goog-toolbar goog-toolbar-disabled">
      <div class="goog-toolbar-button">Button</div>
      <div class="goog-toolbar-button">
        <b><i>Fancy</i></b> <u>Button</u>
      </div>
      <hr>
      <div class="goog-toolbar-button goog-toolbar-button-disabled">
        Disabled Button
      </div>
      <div id="menuButton" class="goog-toolbar-menu-button">
        Menu Button
        <div id="decoratedMenu" class="goog-menu">
          <div class="goog-menuitem">Foo</div>
          <div class="goog-menuitem">Bar</div>
          <hr>
          <div class="goog-menuitem goog-menuitem-disabled">Cake</div>
        </div>
      </div>
      <hr>
      <div class="goog-toolbar-toggle-button goog-toolbar-button-checked">
        Toggle Button
      </div>
      <div class="goog-toolbar-toggle-button">
        <div class="icon goog-edit-underline"></div>
      </div>
    </div>
    <br>
    <div id="perf2" class="perf"></div>
    <br>
    <label>
      Show right-to-left toolbar:
      <input id="t2rtl_show" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Enable right-to-left toolbar:
      <input id="t2rtl_enable" type="checkbox">
    </label>
    &nbsp;
    <label>
      Enable menu button:
      <input id="rtlMenuButton_enable" type="checkbox" checked>
    </label>
    <br>
    <br>
    <div id="t2rtl" class="goog-toolbar goog-toolbar-disabled" dir="rtl">
      <div class="goog-toolbar-button">Button</div>
      <div class="goog-toolbar-button">
        <div><b><i>Fancy</i></b> <u>Button</u></div>
      </div>
      <hr>
      <div class="goog-toolbar-button goog-toolbar-button-disabled">
        Disabled Button
      </div>
      <div id="rtlMenuButton" class="goog-toolbar-menu-button">
        Menu Button
        <div id="rtlDecoratedMenu" class="goog-menu" dir="rtl">
          <div class="goog-menuitem">Foo</div>
          <div class="goog-menuitem">Bar</div>
          <div class="goog-menuitem"><span>????...  </span>
            <span style="font-size:90%; text-align: left;">Ctrl+P</span></div>
          <div class="goog-menuitem">???? ?-HTML (????? ZIP)</div>
          <hr>
          <div class="goog-menuitem goog-menuitem-disabled">Cake</div>
        </div>
      </div>
      <hr>
      <div class="goog-toolbar-toggle-button goog-toolbar-button-checked">
        Toggle Button
      </div>
      <div class="goog-toolbar-toggle-button">
        <!-- For reasons unknown, on FF2, we need an &nbsp; for BiDi. -->
        <div class="icon goog-edit-underline">&nbsp;</div>
      </div>
    </div>
    <br>
    <div id="perf2rtl" class="perf"></div>
  </fieldset>
  <br>
  <br>
  <fieldset>
    <legend>This is starting to look like an editor toolbar:</legend>
    <label>
      Show toolbar:
      <input id="t3_show" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Enable toolbar:
      <input id="t3_enable" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Enable font dropdown:
      <input id="font_enable" type="checkbox" checked>
    </label>
    &nbsp;
    <label>
      Show font size dropdown:
      <input id="fontSize_show" type="checkbox" checked>
    </label>
    <br>
    <br>
    <div id="t3" class="goog-toolbar">
      <div id="font" title="Font" class="goog-toolbar-select goog-edit-font">
        Select font
        <div id="fontMenu" class="goog-menu">
          <div class="goog-option goog-edit-font-normal">Normal</div>
          <div class="goog-option goog-edit-font-times">Times</div>
          <div class="goog-option goog-edit-font-courier">Courier New</div>
          <div class="goog-option goog-edit-font-georgia">Georgia</div>
          <div class="goog-option goog-edit-font-trebuchet">Trebuchet</div>
          <div class="goog-option goog-edit-font-verdana">Verdana</div>
        </div>
      </div>
      <div id="fontSize" title="Font size"
          class="goog-toolbar-select goog-edit-font-size">
        Size
        <div id="fontSizeMenu" class="goog-menu">
          <div class="goog-option">7pt</div>
          <div class="goog-option">10pt</div>
          <div class="goog-option">14pt</div>
          <div class="goog-option">18pt</div>
          <div class="goog-option">24pt</div>
          <div class="goog-option">36pt</div>
        </div>
      </div>
      <div id="bold" title="Bold" class="goog-toolbar-toggle-button">
        <div class="icon goog-edit-bold"></div>
      </div>
      <div id="italic" title="Italic"
          class="goog-toolbar-toggle-button goog-toolbar-button-checked">
        <div class="icon goog-edit-italic"></div>
      </div>
      <div id="underline" title="Underline" class="goog-toolbar-toggle-button">
        <div class="icon goog-edit-underline"></div>
      </div>
      <div id="color" title="Text color" class="goog-toolbar-menu-button">
        <div class="icon goog-edit-color"></div>
        <div id="colorMenu" class="goog-menu">
          <div class="goog-menuitem" style="color:#800;">Red</div>
          <div class="goog-menuitem" style="color:#080;">Green</div>
          <div class="goog-menuitem" style="color:#008;">Blue</div>
        </div>
      </div>
      <div id="bgColor" title="Background color"
          class="goog-toolbar-menu-button">
        <div class="icon goog-edit-background"></div>
        <div id="bgColorMenu" class="goog-menu">
          <div class="goog-menuitem" style="color:#800;">Red</div>
          <div class="goog-menuitem" style="color:#080;">Green</div>
          <div class="goog-menuitem" style="color:#008;">Blue</div>
        </div>
      </div>
      <div id="style" title="Style" class="goog-toolbar-menu-button">
        <div class="goog-edit-style">Style</div>
        <div id="styleMenu" class="goog-menu">
          <div class="goog-menuitem">Clear formatting</div>
          <hr>
          <div class="goog-menuitem">Normal paragraph text</div>
          <div class="goog-menuitem">Minor heading (H3)</div>
          <div class="goog-menuitem">Sub-heading (H2)</div>
          <div class="goog-menuitem">Heading (H1)</div>
          <hr>
          <div class="goog-menuitem">Indent more</div>
          <div class="goog-menuitem">Indent less</div>
          <div class="goog-menuitem goog-menuitem-disabled">Blockquote</div>
        </div>
      </div>
      <hr>
      <div id="insert" title="Insert" class="goog-toolbar-menu-button">
        <div class="goog-edit-insert">
          <span class="icon goog-inline-block goog-edit-insert-icon">&nbsp;</span>
          <span class="goog-inline-block goog-edit-insert-caption">Insert</span>
        </div>
        <div id="insertMenu" class="goog-menu">
          <div class="goog-menuitem">Picture</div>
          <div class="goog-menuitem">Drawing</div>
          <div class="goog-menuitem">Other...</div>
        </div>
      </div>
      <hr>
      <div id="link" title="Create link" class="goog-toolbar-button">
        <div class="goog-edit-link">Link</div>
      </div>
      <hr>
      <div id="listStyle" title="List style"
          class="goog-toolbar-menu-button goog-toolbar-menu-button-disabled">
        <div class="icon goog-edit-list-style"></div>
      </div>
      <hr>
      <div id="alignLeft" title="Left" class="goog-toolbar-toggle-button goog-toolbar-button-collapse-right">
        <div class="icon goog-edit-align-left"></div>
      </div>
      <div id="alignCenter" title="Center"
          class="goog-toolbar-toggle-button goog-toolbar-button-collapse-left goog-toolbar-button-collapse-right">
        <div class="icon goog-edit-align-center"></div>
      </div>
      <div id="alignRight" title="Right" class="goog-toolbar-toggle-button goog-toolbar-button-collapse-left">
        <div class="icon goog-edit-align-right"></div>
      </div>
      <hr>
      <div id="spellcheck" title="Check spelling"
          class="goog-toolbar-menu-button goog-toolbar-menu-button-disabled">
        <div class="goog-edit-spellcheck">Check spelling</div>
      </div>
    </div>
    <br>
    <div id="perf3" class="perf"></div>
  </fieldset>
  <br>
  <br>
  <!-- Event log. -->
  <fieldset class="goog-debug-panel">
    <legend>Event Log</legend>
    <div class="hint">
      <b style="color: #800;">Warning!</b> On Gecko, the event log may cause
      the page to flicker when mousing over toolbar items. This is a Gecko
      issue triggered by scrolling in the event log.
      <br><br>
      Enable logging: <input id="enable_log" type="checkbox" checked>
    </div>
    <br>
    <div id="log"></div>
  </fieldset>
  <script>
    var timer;

    // 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 caption = e.target.getId();
      if (typeof e.target.getCaption == 'function' && e.target.getCaption()) {
        caption += ' (' + e.target.getCaption() + ')';
      }
      goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
    }

    function showPerf(id, start) {
      goog.dom.setTextContent(goog.dom.getElement(id),
          (goog.now() - start) + 'ms');
    }

    goog.events.listen(goog.dom.getElement('enable_log'),
        goog.events.EventType.CLICK,
        function(e) {
          goog.style.setElementShown(goog.dom.getElement('log'), e.target.checked);
          logconsole.setCapturing(e.target.checked);
        });

    function handleShow(e) {
      var t = goog.now();
      var box = e.target;
      this.setVisible(box.checked);
      var caption = this.getId();
      if (typeof this.getCaption == 'function' && this.getCaption()) {
        caption += ' (' + this.getCaption() + ')';
      }
      goog.log.info(logger, (this.isVisible() ? 'Showed' : 'Hid') + ' ' + caption
          + ' in ' + (goog.now() - t) + 'ms');
    }

    function handleEnable(e) {
      if (typeof this.isParentDisabled_ == 'function' &&
          this.isParentDisabled_()) {
        goog.log.warning(logger, 'Can\'t enable/disable control if parent is disabled!');
        return false;
      }

      var t = goog.now();
      var box = e.target;
      this.setEnabled(box.checked);
      var caption = this.getId();
      if (typeof this.getCaption == 'function' && this.getCaption()) {
        caption += ' (' + this.getCaption() + ')';
      }
      goog.log.info(logger, (this.isEnabled() ? 'Enabled' : 'Disabled') + ' ' + caption
          + ' in ' + (goog.now() - t) + 'ms');
      return true;
    }

    // Create first toolbar programmatically.
    timer = goog.now();
    var t1 = new goog.ui.Toolbar();
    t1.addChild(new goog.ui.ToolbarButton('Button'), true);
    t1.getChildAt(0).setTooltip('This is a tooltip for a button');
    t1.addChild(new goog.ui.ToolbarButton('AnotherButton'), true);
    t1.addChild(new goog.ui.ToolbarSeparator(), true);
    t1.addChild(new goog.ui.ToolbarButton('Disabled'), true);
    t1.getChildAt(3).setEnabled(false);
    t1.addChild(new goog.ui.ToolbarButton('YetAnotherButton'), true);
    var toggleButton = new goog.ui.ToolbarToggleButton(goog.dom.createDom(goog.dom.TagName.DIV,
        'icon goog-edit-bold'));
    toggleButton.setChecked(true);
    t1.addChild(toggleButton, true);
    var btnLeft = new goog.ui.ToolbarButton('Left');
    btnLeft.setCollapsed(goog.ui.ButtonSide.END);
    t1.addChild(btnLeft, true);
    var btnCenter = new goog.ui.ToolbarButton('Center');
    btnCenter.setCollapsed(goog.ui.ButtonSide.END | goog.ui.ButtonSide.START);
    t1.addChild(btnCenter, true);
    var btnRight = new goog.ui.ToolbarButton('Right');
    btnRight.setCollapsed(goog.ui.ButtonSide.START);
    t1.addChild(btnRight, true);
    t1.render(goog.dom.getElement('t1'));
    showPerf('perf1', timer);
    goog.events.listen(t1, EVENTS, logEvent);

    // Hook up checkboxes.
    goog.events.listen(goog.dom.getElement('t1_show'),
        goog.events.EventType.CLICK, handleShow, false, t1);
    goog.events.listen(goog.dom.getElement('t1_enable'),
        goog.events.EventType.CLICK, handleEnable, false, t1);
    goog.events.listen(goog.dom.getElement('toggleButton_enable'),
        goog.events.EventType.CLICK, handleEnable, false, toggleButton);

    // Create right-to-left toolbar programmatically.
    timer = goog.now();
    var t1rtl = new goog.ui.Toolbar();
    t1rtl.addChild(new goog.ui.ToolbarButton('Button'), true);
    t1rtl.getChildAt(0).setTooltip('This is a tooltip for a button');
    t1rtl.addChild(new goog.ui.ToolbarButton('AnotherButton'), true);
    t1rtl.addChild(new goog.ui.ToolbarSeparator(), true);
    t1rtl.addChild(new goog.ui.ToolbarButton('Disabled'), true);
    t1rtl.getChildAt(3).setEnabled(false);
    t1rtl.addChild(new goog.ui.ToolbarButton('YetAnotherButton'), true);
    // For reasons unknown, on FF2, we have to inject an &nbsp; character into
    // the icon div for RTL positioning to work.  FF2 BiDi sucks!
    var rtlToggleButton = new goog.ui.ToolbarToggleButton(goog.dom.createDom(
        goog.dom.TagName.DIV, 'icon goog-edit-bold', '\u00A0'));
    rtlToggleButton.setChecked(true);
    t1rtl.addChild(rtlToggleButton, true);
    var btnLeftRtl = new goog.ui.ToolbarButton('Left');
    t1rtl.addChild(btnLeftRtl, true);
    var btnCenterRtl = new goog.ui.ToolbarButton('Center');
    t1rtl.addChild(btnCenterRtl, true);
    var btnRightRtl = new goog.ui.ToolbarButton('Right');
    t1rtl.addChild(btnRightRtl, true);

    t1rtl.render(goog.dom.getElement('t1rtl'));
    showPerf('perf1rtl', timer);
    goog.events.listen(t1rtl, EVENTS, logEvent);

    // The setCollapsed method needs to be called after the toolbar is rendered
    // for it to pick up the directionality of the toolbar.
    btnLeftRtl.setCollapsed(goog.ui.ButtonSide.END);
    btnCenterRtl.setCollapsed(
        goog.ui.ButtonSide.END | goog.ui.ButtonSide.START);
    btnRightRtl.setCollapsed(goog.ui.ButtonSide.START);

    // Hook up checkboxes.
    goog.events.listen(goog.dom.getElement('t1rtl_show'),
        goog.events.EventType.CLICK, handleShow, false, t1rtl);
    goog.events.listen(goog.dom.getElement('t1rtl_enable'),
        goog.events.EventType.CLICK, handleEnable, false, t1rtl);
    goog.events.listen(goog.dom.getElement('rtlToggleButton_enable'),
        goog.events.EventType.CLICK, handleEnable, false, rtlToggleButton);

    // Decorate the second toolbar.
    timer = goog.now();
    var t2 = new goog.ui.Toolbar();
    t2.decorate(goog.dom.getElement('t2'));
    showPerf('perf2', timer);
    goog.events.listen(t2, EVENTS, logEvent);

    // Hook up checkboxes.
    goog.events.listen(goog.dom.getElement('t2_show'),
        goog.events.EventType.CLICK, handleShow, false, t2);
    goog.events.listen(goog.dom.getElement('t2_enable'),
        goog.events.EventType.CLICK, handleEnable, false, t2);
    goog.events.listen(goog.dom.getElement('menuButton_enable'),
        goog.events.EventType.CLICK, handleEnable, false,
        t2.getChild('menuButton'));

    // Decorate the second toolbar.
    timer = goog.now();
    var t2rtl = new goog.ui.Toolbar();
    t2rtl.decorate(goog.dom.getElement('t2rtl'));
    showPerf('perf2rtl', timer);
    goog.events.listen(t2rtl, EVENTS, logEvent);

    // Hook up checkboxes.
    goog.events.listen(goog.dom.getElement('t2rtl_show'),
        goog.events.EventType.CLICK, handleShow, false, t2rtl);
    goog.events.listen(goog.dom.getElement('t2rtl_enable'),
        goog.events.EventType.CLICK, handleEnable, false, t2rtl);
    goog.events.listen(goog.dom.getElement('rtlMenuButton_enable'),
        goog.events.EventType.CLICK, handleEnable, false,
        t2rtl.getChild('rtlMenuButton'));

    // Decorate the third toolbar.
    timer = goog.now();
    var t3 = new goog.ui.Toolbar();
    t3.decorate(goog.dom.getElement('t3'));
    showPerf('perf3', timer);
    goog.events.listen(t3, EVENTS, logEvent);

    // Have the alignment buttons be controlled by a selection model.
    var selectionModel = new goog.ui.SelectionModel();
    selectionModel.setSelectionHandler(function(button, select) {
      if (button) {
        button.setChecked(select);
      }
    });
    goog.array.forEach(['alignLeft', 'alignCenter', 'alignRight'],
        function(id) {
          var button = t3.getChild(id);
          // Let the selection model control the button's checked state.
          button.setAutoStates(goog.ui.Component.State.CHECKED, false);
          selectionModel.addItem(button);
          goog.events.listen(button, goog.ui.Component.EventType.ACTION,
              function(e) {
                selectionModel.setSelectedItem(e.target);
              });
        });

    // Hook up checkboxes.
    goog.events.listen(goog.dom.getElement('t3_show'),
        goog.events.EventType.CLICK, handleShow, false, t3);
    goog.events.listen(goog.dom.getElement('t3_enable'),
        goog.events.EventType.CLICK, handleEnable, false, t3);
    goog.events.listen(goog.dom.getElement('font_enable'),
        goog.events.EventType.CLICK, handleEnable, false,
        t3.getChild('font'));
    goog.events.listen(goog.dom.getElement('fontSize_show'),
        goog.events.EventType.CLICK, handleShow, false,
        t3.getChild('fontSize'));
  </script>
</body>
</html>