jack
/
cocorobolx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!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.Menu</title>
  <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">
  <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.CheckBoxMenuItem');
    goog.require('goog.ui.Menu');
    goog.require('goog.ui.MenuItem');
    goog.require('goog.dom.TagName');
  </script>
</head>
<body>
  <h1>goog.ui.Menu</h1>
  <div>
    This is a very basic menu class, it doesn't handle its display or
    dismissal. It just exists, listens to keys and mouse events and can fire
    events for selections or highlights.
  </div>
  <div>
    <a href="javascript:void(menu1.setVisible(true));">Show Menu</a> |
    <a href="javascript:void(menu1.setVisible(false));">Hide Menu</a> |
    <a href="javascript:void(menu1.setPosition(0, 0));">Move(0, 0)</a> |
    <a href="javascript:void(menu1.setPosition(50, 50));">Move(50, 50)</a> |
    <a href="javascript:void(menu1.setPosition(50, 100));">Move(50, 100)</a> |
    <a href="javascript:void(menu1.setPosition(200, 300));">Move(200, 300)</a>
  </div>
  <br>
  <br>
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr valign="top" height="180">
        <td width="33%">
          <div id="menu1"></div>
        </td>
        <td width="33%">
          <div id="menu2" class="goog-menu">
            <div class="goog-menuitem">Google</div>
            <div class="goog-menuitem">Yahoo</div>
            <div class="goog-menuitem">MSN</div>
            <hr>
            <div id="enableNewItems"
                class="goog-menuitem goog-option goog-option-selected">
              <div class="goog-menuitem-accel">Ctrl+E</div>
              Enable new items
            </div>
            <hr>
            <div id="addNewItem" class="goog-menuitem">
              <div class="goog-menuitem-accel">Ctrl+Shift+N</div>
              New...
            </div>
          </div>
        </td>
        <td width="33%">
          <ul id="menu3" class="goog-menu">
            <li class="goog-menuitem">I am a <b>menu</b></li>
            <li class="goog-menuitem">based on an</li>
            <li class="goog-menuitem goog-menuitem-disabled">unordered list</li>
            <li class="goog-menuitem">Woop!</li>
          </ul>
        </td>
      </tr>
      <tr valign="top" height="180">
        <td width="33%">
          Here's a menu with checkbox items.<br>You checked:&nbsp;
          <span id="checkedItems" style="color: #800">Bold</span><br>
          <div id="menu4"></div>
        </td>
        <td width="33%">
          Here's a BiDi menu with checkbox items.<br>
          <div id="menu5" dir="rtl"></div>
        </td>
        <td width="33%">
          Here's a menu with an explicit content container.<br>
          <div id="menu6" class="goog-menu">
            <div style="background: #ccc; border-right: 15px solid #888;">
              <div class="goog-menu-content">
                <div class="goog-menuitem">Red</div>
                <div class="goog-menuitem">Black</div>
                <div class="goog-menuitem">Blue</div>
              </div>
            </div>
            <hr>
            <div class="goog-menuitem">White</div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <br>
  <br>
  <!-- Event log. -->
  <fieldset class="goog-debug-panel">
    <legend>Event Log</legend>
    <div id="log"></div>
  </fieldset>
  <div id="perf"></div>
  <script type="text/javascript">
    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 name = e.target.getCaption ? e.target.getCaption() : 'Menu';
      goog.log.info(logger, '"' + name + '" dispatched: ' + e.type);
    }

    var el = goog.dom.getElement('menu1');
    var menu1 = new goog.ui.Menu();
    var m1, m2, m3, m4, m5, m6;
    menu1.addItem(m1 = new goog.ui.MenuItem('Inbox'));
    menu1.addItem(m2 = new goog.ui.MenuItem('Starred'));
    menu1.addItem(m3 = new goog.ui.MenuItem('Chats'));
    menu1.addItem(m4 = new goog.ui.MenuItem('Sent'));
    menu1.addItem(new goog.ui.MenuSeparator());
    menu1.addItem(m5 = new goog.ui.MenuItem('New Folder...'));

    menu1.addItemAt(m6 = new goog.ui.MenuItem('All Mail'), 1);
    menu1.render(el);
    goog.events.listen(menu1, EVENTS, logEvent);

    m1.setEnabled(false);
    m6.setEnabled(false);

    var el2 = goog.dom.getElement('menu2');
    var menu2 = new goog.ui.Menu();
    menu2.decorate(el2);
    goog.events.listen(menu2, EVENTS, logEvent);

    goog.events.listen(menu2, 'action', function(e) {
      if (e.target.getId() == 'addNewItem') {
        var n = prompt('Enter a new item...');
        if (n) {
          menu2.addItemAt(new goog.ui.MenuItem(n), menu2.getItemCount() - 4);
        }
      } else if (e.target.getId() == 'enableNewItems') {
        menu2.getItemAt(menu2.getItemCount() - 1).setEnabled(
            e.target.isChecked());
      } else {
        alert(e.target.getCaption());
      }
    });

    var el3 = goog.dom.getElement('menu3');
    var menu3 = new goog.ui.Menu();
    menu3.decorate(el3);
    goog.events.listen(menu3, EVENTS, logEvent);

    var menu4 = new goog.ui.Menu();
    var foo, bar;
    menu4.addItem(foo = new goog.ui.CheckBoxMenuItem('Bold'));
    menu4.addItem(new goog.ui.CheckBoxMenuItem('Italic'));
    menu4.addItem(bar = new goog.ui.CheckBoxMenuItem('3D'));
    menu4.addItem(new goog.ui.CheckBoxMenuItem('Underline'));
    foo.setChecked(true);
    bar.setEnabled(false);
    menu4.render(goog.dom.getElement('menu4'));
    goog.events.listen(menu4, EVENTS, logEvent);

    goog.events.listen(menu4, 'action', function(e) {
      var items = [];
      menu4.forEachChild(function(child) {
        if (child.isChecked()) {
          items.push(child.getCaption());
        }
      });
      goog.dom.setTextContent(goog.dom.getElement('checkedItems'),
          items.length > 0 ? items.join(', ') : 'nothing');
    });

    function createCheckBoxItem(label, shortcut) {
      return new goog.ui.CheckBoxMenuItem([
        goog.dom.createDom(goog.dom.TagName.DIV, 'goog-menuitem-accel', shortcut),
        goog.dom.createTextNode(label)
      ]);
    }

    var menu5 = new goog.ui.Menu();
    menu5.setRightToLeft(true);
    var fee, baz;
    menu5.addItem(fee = createCheckBoxItem('Bold', 'Ctrl+B'));
    menu5.addItem(createCheckBoxItem('Italic', 'Ctrl+I'));
    menu5.addItem(baz = createCheckBoxItem('3D', 'Ctrl+Shift+3'));
    menu5.addItem(createCheckBoxItem('Underline', 'Ctrl+U'));
    fee.setChecked(true);
    baz.setEnabled(false);
    menu5.render(goog.dom.getElement('menu5'));
    goog.events.listen(menu5, EVENTS, logEvent);

    var menu6 = new goog.ui.Menu();
    menu6.decorate(goog.dom.getElement('menu6'));
    goog.events.listen(menu6, EVENTS, logEvent);

    goog.dom.setTextContent(goog.dom.getElement('perf'),
        (goog.now() - timer) + 'ms');
  </script>
</body>
</html>