Andreas Hocevar
221 lines
7.5 KiB
HTML
221 lines
7.5 KiB
HTML
<!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');
|
|
</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.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('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>
|