r3488 committed - menu: added keyboard support to default demo (page up/down, key up/dow...
Revision: 3488
Author: joern.zaefferer
Date: Sat Dec 5 03:17:08 2009
Log: menu: added keyboard support to default demo (page up/down, key
up/down, enter)
http://code.google.com/p/jquery-ui/source/detail?r=3488
Modified:
/branches/dev/tests/visual/menu/default.html
=======================================
--- /branches/dev/tests/visual/menu/default.html Mon Nov 2 11:56:35 2009
+++ /branches/dev/tests/visual/menu/default.html Sat Dec 5 03:17:08 2009
@@ -21,29 +21,46 @@
selected: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
}
+ }).keydown(function(event) {
+ var menu = $(this).data("menu");
+ if (menu.widget().is(":hidden"))
+ return;
+ event.stopPropagation();
+ switch (event.keyCode) {
+ case $.ui.keyCode.PAGE_UP:
+ menu.previousPage();
+ event.preventDefault();
+ break;
+ case $.ui.keyCode.PAGE_DOWN:
+ menu.nextPage();
+ event.preventDefault();
+ break;
+ case $.ui.keyCode.UP:
+ menu.previous();
+ event.preventDefault();
+ break;
+ case $.ui.keyCode.DOWN:
+ menu.next();
+ event.preventDefault();
+ break;
+ case $.ui.keyCode.ENTER:
+ menu.select();
+ event.preventDefault();
+ break;
+ }
});
-
- $("#controls button").click(function() {
- menus.menu(this.id);
- });
+
});
</script>
<style>
body { font-size:62.5%; }
.ui-menu { width: 200px; }
- #menu2 { height: 200px; }
+ #menu2 { height: 200px; overflow: auto; }
</style>
</head>
<body>
-<div id="controls">
- <button id="next">Next</button>
- <button id="previous">Previous</button>
- <button id="nextPage">Next Page</button>
- <button id="previousPage">Previous Page</button>
-</div>
-
-<ul id="menu1">
+<ul id="menu1" tabindex="0">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
@@ -51,7 +68,7 @@
<li><a href="#">Adelphi</a></li>
</ul>
-<ul id="menu2">
+<ul id="menu2" tabindex="0">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
--