<!DOCTYPE html>
<html>
<!--
Copyright 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.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:
<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.log.setLevel(goog.log.getRootLogger(), 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>
Codebase Browser
chromium