r3414 committed - menu: nested menus with keyboard handling, still rather messy
Revision: 3414
Author: joern.zaefferer
Date: Sat Nov 7 02:21:40 2009
Log: menu: nested menus with keyboard handling, still rather messy
http://code.google.com/p/jquery-ui/source/detail?r=3414
Modified:
/branches/dev/tests/visual/menu/nested.html
=======================================
--- /branches/dev/tests/visual/menu/nested.html Sat Nov 7 02:04:59 2009
+++ /branches/dev/tests/visual/menu/nested.html Sat Nov 7 02:21:40 2009
@@ -19,31 +19,35 @@
}).appendTo(document.body).themeswitcher();
- var restore;
+ var submenu;
var menu = $("#menu").menu({
selected: function(event, ui) {
$("#log").append("<div>Selected " + ui.item.text() + "</div>");
},
focus: function(event, ui) {
var nested = $("ul", ui.item);
- if (restore) {
- restore.child.appendTo(restore.parent).hide();
- restore = null;
+ if (submenu) {
+ submenu.child.appendTo(submenu.parent).hide();
+ submenu = null;
}
if (nested.length) {
- nested.menu().appendTo(document.body).show().position({
+ nested.menu({
+ selected: function(event, ui) {
+ $("#log").append("<div>Selected " + ui.item.text() + "</div>");
+ }
+ }).appendTo(document.body).menu("deactivate").show().position({
my: "left top",
at: "right top",
of: ui.item
});
- restore = {
+ submenu = {
child: nested,
parent: ui.item
}
}
}
}).hide();
- menu.find("ul").hide();
+ menu.find("ul").hide().prev("a").prepend('<span class="ui-icon
ui-icon-carat-1-e"></span>');
$("button").click(function(event) {
@@ -56,28 +60,42 @@
});
$().one("click", function() {
menu.hide();
- if (restore) {
- restore.child.appendTo(restore.parent).hide();
- restore = null;
+ if (submenu) {
+ submenu.child.appendTo(submenu.parent).hide();
+ submenu = null;
}
})
}).keydown(function(event) {
- var menu = $("#menu" + this.id).data("menu");
+ var menu = $("#menu" + this.id).data("menu"),
+ sub = submenu && submenu.focussed && submenu.child.data("menu");
if (menu.widget().is(":hidden"))
return;
event.stopPropagation();
switch (event.keyCode) {
case $.ui.keyCode.PAGE_UP:
- menu.previousPage();
+ sub ? sub.previousPage() : menu.previousPage();
break;
case $.ui.keyCode.PAGE_DOWN:
- menu.nextPage();
+ sub ? sub.nextPage() : menu.nextPage();
break;
case $.ui.keyCode.UP:
- menu.previous();
+ sub ? sub.previous() : menu.previous();
+ break;
+ case $.ui.keyCode.LEFT:
+ if (sub) {
+ submenu.focussed = false;
+ sub.deactivate();
+ }
+ break;
+ case $.ui.keyCode.RIGHT:
+ if (submenu.child) {
+ submenu.focussed = true;
+ sub = submenu.child.data("menu");
+ sub.activate(sub.element.children(":first"));
+ }
break;
case $.ui.keyCode.DOWN:
- menu.next();
+ sub ? sub.next() : menu.next();
event.preventDefault();
break;
case $.ui.keyCode.ENTER:
@@ -130,6 +148,7 @@
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; position: absolute; }
+ .ui-menu .ui-icon { float: right; }
</style>
</head>
<body>
@@ -150,7 +169,16 @@
<li><a href="#">Anaheim</a></li>
<li><a href="#">Cologne</a></li>
<li><a href="#">Frankfurt</a></li>
- <li><a href="#">Magdeburg</a></li>
+ <li>
+ <a href="#">Magdeburg</a>
+ <ul>
+ <li><a href="#">Mberdeen</a></li>
+ <li><a href="#">Mda</a></li>
+ <li><a href="#">Mdamsville</a></li>
+ <li><a href="#">Mddyston</a></li>
+ <li><a href="#">Mmesville</a></li>
+ </ul>
+ </li>
<li><a href="#">Munich</a></li>
<li><a href="#">Utrecht</a></li>
<li><a href="#">Zurich</a></li>