accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
131 lines (111 loc) • 4.06 kB
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.SubMenu</title>
<script src="../base.js"></script>
<script>
goog.require('goog.debug');
goog.require('goog.positioning.Corner');
goog.require('goog.ui.Menu');
goog.require('goog.ui.SubMenu');
goog.require('goog.ui.PopupMenu');
</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/submenu.css">
</head>
<body>
<h1>goog.ui.SubMenu</h1>
<p>Demonstration of different of hierarchical menus.</p>
<p><button id="button">Open menu</button></p>
<p>
Here's a menu (with submenus) defined in markup:
</p>
<div id="demoMenu" class="goog-menu">
<div class="goog-menuitem">Open...</div>
<div class="goog-submenu">Open Recent
<div class="goog-menu">
<div class="goog-menuitem">Annual Report.pdf</div>
<div class="goog-menuitem">Quarterly Update.pdf</div>
<div class="goog-menuitem">Enemies List.txt</div>
<div class="goog-submenu">More
<div class="goog-menu">
<div class="goog-menuitem">Foo.txt</div>
<div class="goog-menuitem">Bar.txt</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Popup menu with sub menus
var menu = new goog.ui.PopupMenu();
menu.attach(document.getElementById('button'),
goog.positioning.Corner.BOTTOM_START);
var a = new goog.ui.SubMenu('Zero');
var b = new goog.ui.SubMenu('Ten');
var c = new goog.ui.SubMenu('Twenty');
var d = new goog.ui.SubMenu('Thirty');
var aa = new goog.ui.SubMenu('One')
aa.setEnabled(false);
aa.addItem(new goog.ui.MenuItem('Add'));
aa.addItem(new goog.ui.MenuItem('Subtract'));
aa.addItem(new goog.ui.MenuItem('Multiply'));
a.addItem(aa);
a.addItem(new goog.ui.MenuItem('Two'));
a.addItem(new goog.ui.MenuItem('Three'));
a.addItem(new goog.ui.MenuItem('Four'));
b.addItem(new goog.ui.MenuItem('Eleven'));
b.addItem(new goog.ui.MenuItem('Thirteen'));
b.addItem(new goog.ui.MenuItem('Fourteen'));
b.addItem(new goog.ui.MenuItem('Fifteen'));
c.addItem(new goog.ui.MenuItem('Twenty-one'));
var cb = new goog.ui.SubMenu('Twenty-Two')
cb.addItem(new goog.ui.MenuItem('Add'));
cb.addItem(new goog.ui.MenuItem('Subtract'));
cb.addItem(new goog.ui.MenuItem('Multiply'));
var cbd = new goog.ui.SubMenu('More')
cbd.addItem(new goog.ui.MenuItem('Square Root'));
cbd.addItem(new goog.ui.MenuItem('Power'));
cbd.addItem(new goog.ui.MenuItem('Square'));
cb.addItem(cbd);
c.addItem(cb);
c.addItem(new goog.ui.MenuItem('Twenty-three'));
c.addItem(new goog.ui.MenuItem('Twenty-four'));
d.addItem(new goog.ui.MenuItem('Thirty-one'));
d.addItem(new goog.ui.MenuItem('Thirty-two'));
d.addItem(new goog.ui.MenuItem('Thirty-three'));
d.addItem(new goog.ui.MenuItem('Thirty-four'));
menu.addItem(a);
menu.addItem(new goog.ui.MenuItem('AaAaAaAaAaAa'));
menu.addItem(new goog.ui.MenuItem('BbBbBbBbBbBb'));
menu.addItem(b);
menu.addItem(c);
menu.addItem(d);
var ccc = new goog.ui.MenuItem('CcCcCcCcCcCc');
ccc.setEnabled(false);
menu.addItem(ccc);
menu.addItem(new goog.ui.MenuItem('DdDdDdDdDdDd'));
menu.render();
menu.getElement().id = 'foo';
goog.events.listen(menu, 'action', function(e) {
var action = e.target.getCaption();
alert(action);
});
var menuDiv = goog.dom.getElement('demoMenu');
var menu2 = new goog.ui.Menu();
menu2.decorate(menuDiv);
goog.events.listen(menu2, 'action', function(e) {
var action = e.target.getCaption();
alert(action);
});
</script>
</body>
</html>