library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

First attempt at integrating key handling into menu

Browse Source
This commit is contained in:
jzaefferer 2010-04-30 13:04:09 +02:00
parent c7edd586d4
commit abfdb2a8b6
6 changed files with 59 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
tests/visual/menu/contextmenu.html
View File

@ -18,23 +18,24 @@
top: 10 top: 10
}).appendTo(document.body).themeswitcher(); }).appendTo(document.body).themeswitcher();
var menus = $("#menu1, #menu2").menu({ $("button").each(function() {
$(this).next().menu({
selected: function(event, ui) { selected: function(event, ui) {
$(this).hide();
$("#log").append("<div>Selected " + ui.item.text() + "</div>"); $("#log").append("<div>Selected " + ui.item.text() + "</div>");
} },
input: $(this)
}).hide(); }).hide();
}).click(function(event) {
$("button").click(function(event) {
// TODO required to prevent the click handler below from handling this event // TODO required to prevent the click handler below from handling this event
event.stopPropagation(); event.stopPropagation();
$("#menu" + this.id).menu("deactivate").show().position({ var menu = $("#menu" + this.id).menu("deactivate").show().position({
my: "left top", my: "left top",
at: "right top", at: "right top",
of: event.pageX > 0 ? event : this of: event.pageX > 0 ? event : this
}); });
$(document).one("click", function() { $(document).one("click", function() {
menus.hide(); menu.hide();
}) })
}).keydown(function(event) { }).keydown(function(event) {
var menu = $("#menu" + this.id).data("menu"); var menu = $("#menu" + this.id).data("menu");
@ -42,24 +43,8 @@
return; return;
event.stopPropagation(); event.stopPropagation();
switch (event.keyCode) { switch (event.keyCode) {
case $.ui.keyCode.PAGE_UP:
menu.previousPage();
break;
case $.ui.keyCode.PAGE_DOWN:
menu.nextPage();
break;
case $.ui.keyCode.UP:
menu.previous();
break;
case $.ui.keyCode.DOWN:
menu.next();
event.preventDefault();
break;
case $.ui.keyCode.ENTER:
case $.ui.keyCode.TAB: case $.ui.keyCode.TAB:
menu.select();
menu.widget().hide(); menu.widget().hide();
event.preventDefault();
break; break;
case $.ui.keyCode.ESCAPE: case $.ui.keyCode.ESCAPE:
menu.widget().hide(); menu.widget().hide();
@ -111,7 +96,6 @@
<body> <body>
<button id="1">Show context menu 1</button> <button id="1">Show context menu 1</button>
<ul id="menu1"> <ul id="menu1">
<li><a href="#">Amsterdam</a></li> <li><a href="#">Amsterdam</a></li>
<li><a href="#">Anaheim</a></li> <li><a href="#">Anaheim</a></li>
@ -123,6 +107,12 @@
<li><a href="#">Zurich</a></li> <li><a href="#">Zurich</a></li>
</ul> </ul>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
<button id="2">Show context menu 2</button>
<ul id="menu2"> <ul id="menu2">
<li><a href="#">Aberdeen</a></li> <li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li> <li><a href="#">Ada</a></li>
@ -164,12 +154,5 @@
<li><a href="#">Amesville</a></li> <li><a href="#">Amesville</a></li>
</ul> </ul>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
<button id="2">Show context menu 2</button>
</body> </body>
</html> </html>

2
tests/visual/menu/drilldown.html
View File

@ -28,6 +28,8 @@
this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show(); this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>').end().filter(":first").show();
this.element.find("ul").menu({ this.element.find("ul").menu({
// disable built-in key handling
input: $(),
focus: function(event, ui) { focus: function(event, ui) {
self.activeItem = ui.item; self.activeItem = ui.item;
}, },

33
tests/visual/menu/menu.html
View File

@ -17,37 +17,10 @@
top: 10 top: 10
}).appendTo(document.body).themeswitcher(); }).appendTo(document.body).themeswitcher();
var menus = $("#menu1, #menu2").menu({ $("#menu1, #menu2").menu({
selected: function(event, ui) { selected: function(event, ui) {
$("<div/>").text("Selected: " + ui.item.text()).appendTo("#log"); $("<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;
}
}); });
}); });
@ -60,7 +33,7 @@
</head> </head>
<body> <body>
<ul id="menu1" tabindex="0"> <ul id="menu1">
<li><a href="#">Aberdeen</a></li> <li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li> <li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li> <li><a href="#">Adamsville</a></li>
@ -68,7 +41,7 @@
<li><a href="#">Adelphi</a></li> <li><a href="#">Adelphi</a></li>
</ul> </ul>
<ul id="menu2" tabindex="0"> <ul id="menu2">
<li><a href="#">Aberdeen</a></li> <li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li> <li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li> <li><a href="#">Adamsville</a></li>

2
tests/visual/menu/nested.html
View File

@ -28,6 +28,8 @@
this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>'); this.element.find("ul").hide().prev("a").prepend('<span class="ui-icon ui-icon-carat-1-e"></span>');
this.element.find("ul").andSelf().menu({ this.element.find("ul").andSelf().menu({
// disable built-in key handling
input: $(),
selected: this.options.selected, selected: this.options.selected,
focus: function(event, ui) { focus: function(event, ui) {
self.active = ui.item.parent(); self.active = ui.item.parent();

2
ui/jquery.ui.autocomplete.js vendored
View File

@ -104,6 +104,8 @@ $.widget( "ui.autocomplete", {
.addClass( "ui-autocomplete" ) .addClass( "ui-autocomplete" )
.appendTo( "body", doc ) .appendTo( "body", doc )
.menu({ .menu({
// custom key handling for now
input: $(),
focus: function( event, ui ) { focus: function( event, ui ) {
var item = ui.item.data( "item.autocomplete" ); var item = ui.item.data( "item.autocomplete" );
if ( false !== self._trigger( "focus", null, { item: item } ) ) { if ( false !== self._trigger( "focus", null, { item: item } ) ) {

33
ui/jquery.ui.menu.js vendored
View File

@ -31,6 +31,39 @@ $.widget("ui.menu", {
self.select( event ); self.select( event );
}); });
this.refresh(); this.refresh();
if (!this.options.input) {
this.options.input = this.element.attr("tabindex", 0);
}
this.options.input.bind("keydown.menu", function(event) {
switch (event.keyCode) {
case $.ui.keyCode.PAGE_UP:
self.previousPage();
event.preventDefault();
event.stopImmediatePropagation();
break;
case $.ui.keyCode.PAGE_DOWN:
self.nextPage();
event.preventDefault();
event.stopImmediatePropagation();
break;
case $.ui.keyCode.UP:
self.previous();
event.preventDefault();
event.stopImmediatePropagation();
break;
case $.ui.keyCode.DOWN:
self.next();
event.preventDefault();
event.stopImmediatePropagation();
break;
case $.ui.keyCode.ENTER:
self.select();
event.preventDefault();
event.stopImmediatePropagation();
break;
}
});
}, },
destroy: function() { destroy: function() {