chao
/
mini_cocopi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!DOCTYPE html>
<html>
<!--
Copyright 2012 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.menuBar Demo</title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.array');
    goog.require('goog.debug.DivConsole');
    goog.require('goog.debug.LogManager');
    goog.require('goog.events');
    goog.require('goog.log');
    goog.require('goog.object');
    goog.require('goog.ui.Menu');
    goog.require('goog.ui.MenuBarRenderer');
    goog.require('goog.ui.MenuButton');
    goog.require('goog.ui.MenuItem');
    goog.require('goog.ui.Separator');
    goog.require('goog.ui.decorate');
    goog.require('goog.ui.menuBar');
    goog.require('goog.ui.menuBarDecorator');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/menu.css">
  <link rel="stylesheet" href="../css/menubar.css">
  <link rel="stylesheet" href="../css/menubutton.css">
  <link rel="stylesheet" href="../css/menuitem.css">
  <link rel="stylesheet" href="../css/menuseparator.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;
    }

    /* "Format" icon. */
    .format-icon {
      background-position: -64px;
    }

    .positioning-frame {
      height: 250px;
      overflow: auto;
      width: 100%;
    }

    .format-lightborder {
      border-style: solid;
      border-width: 1px;
      border-color: #ddd;
    }
  </style>
</head>

<body>
  <h1>goog.ui.menuBar example</h1>
  <table border="0" cellpadding="0" cellspacing="4" width="100%">
    <tbody>
      <tr valign="top">
        <td width="67%">
          <fieldset>
            <legend>
              This <strong>menu bar</strong> was created programmatically:
              &nbsp;
            </legend>
            <table border="0" cellpadding="0" cellspacing="4">
              <tbody>
                <tr>
                  <td>
                    <div id="menuBarProgrammatic"
                        class="format-lightborder"></div>
                  </td>
                </tr>
              </tbody>
            </table>
            <br>
          </fieldset>
         </td>

        <td width="67%">
          <fieldset>
            <legend>
              This <strong>menu bar</strong> is decorated:
              &nbsp;
            </legend>
            <!-- Wrap the menubar in a table to prevent it from stretching -->
            <table border="0" cellpadding="0" cellspacing="4"><tbody>
                <tr align="middle"><td>
            <!-- Decorated menu bar definition begins here -->
            <div id="menubar" class="goog-menubar format-lightborder">
              <div id="FileButton" class="goog-menu-button" title="File">
                <span style="vertical-align:middle">File</span>
                <!-- This DIV will be auto-decorated with a menu. -->
                <div id="fileMenu" class="goog-menu">
                  <div class="goog-menuitem">Open</div>
                  <div class="goog-menuitem">Save</div>
                  <div class="goog-menuseparator"></div>
                  <div class="goog-menuitem">Close</div>
                </div>
              </div>
              <div id="formatButton" class="goog-menu-button"
                  title="Format">
                <!-- These elements will become the button's caption. -->
                <div class="icon format-icon goog-inline-block"></div>
                <span style="vertical-align:middle">Format</span>
                <!-- This DIV will be auto-decorated with a menu. -->
                <div id="formatMenu" class="goog-menu">
                  <div class="goog-menuitem">Bold</div>
                  <div class="goog-menuitem">Italic</div>
                  <div class="goog-menuitem">Underline</div>
                  <div class="goog-menuseparator"></div>
                  <div class="goog-menuitem goog-menuitem-disabled">
                    Strikethrough
                  </div>
                  <div class="goog-menuseparator"></div>
                  <div class="goog-menuitem">Font...</div>
                  <div class="goog-menuitem">Color...</div>
                </div>
              </div>
            </div>
            </td></tr></tbody></table>
            <br>
          </fieldset>
        </td>
      </tr>
      <tr>
        <td width="33%">
          <!-- Event log. -->
          <fieldset class="goog-debug-panel">
            <legend>Event Log</legend>
            <div id="log"></div>
          </fieldset>
        </td>
      </tr>
    </tbody>
  </table>
  <br>
  <div id="perf"></div>
  <script>

  // Create programmatic menu bar with menus.
  buildMenu = function(rootNode) {
    var menubar = goog.ui.menuBar.create();
    var menuNames = ["File","Edit","About"];
    var menuOptions = [];
    menuOptions[0] = ['New Files', 'Open File', null, 'Exit'];
    menuOptions[1] = ['Copy', 'Paste'];
    menuOptions[2] = ['Zerg Rush!', null, 'Exit'];

    for (i in menuNames) {
      // Create the drop down menu with a few suboptions.
      var menu = new goog.ui.Menu();
      goog.array.forEach(menuOptions[i],
        function(label) {
          var item;
          if (label) {
            item = new goog.ui.MenuItem(label + '...');
            item.setId(label);
          } else {
            item = new goog.ui.MenuSeparator();
          }
          item.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
          menu.addItem(item);
        });

      // Create a button inside menubar.
      var btn = new goog.ui.MenuButton(menuNames[i], menu);
      btn.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
      menubar.addChild(btn, true);
      goog.events.listen(btn, EVENTS, logEvent);
    }
    menubar.render(goog.dom.getElement('menuBarProgrammatic'));
  }

  // Set up a logger.
  var timer = goog.now();
  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 component = e.target;
    var caption = (typeof component.getCaption == 'function') ?
        component.getCaption() : component.getId();
    goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
  }

  buildMenu(goog.dom.getElement('menuBarProgrammatic'));

  // Decorate a pre-baked menubar.
  var menubar = goog.ui.decorate(goog.dom.getElement('menubar'));

  // Compute time to process entire page
  goog.dom.setTextContent(goog.dom.getElement('perf'),
    (goog.now() - timer) + 'ms');
  </script>
</body>
</html>