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

Menu: Fix menubar tab and focus handling

Browse Source
This commit is contained in:
jzaefferer 2011-03-17 11:50:21 +01:00
parent a077047fb3
commit 4a04ad2019
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@
} }
/* menubar styles */ /* menubar styles */
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; } .ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; }
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } .ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
table { table {

23
tests/visual/menu/menubar.js
View File

@ -17,7 +17,7 @@ $.widget("ui.menubar", {
var o = this.options; var o = this.options;
this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix'); this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix');
this._focusable(items);
items.next("ul").each(function(i, elm) { items.next("ul").each(function(i, elm) {
$(elm).menu({ $(elm).menu({
select: function(event, ui) { select: function(event, ui) {
@ -38,11 +38,12 @@ $.widget("ui.menubar", {
self.right(event); self.right(event);
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.TAB:
self[ event.shiftKey ? "left" : "right" ]( event );
event.preventDefault();
break;
}; };
}).blur(function() {
$(this).hide().prev().removeClass("ui-state-active").removeAttr("tabIndex");
self.timer = setTimeout(function() {
self.open = false;
}, 13);
}); });
}); });
items.each(function() { items.each(function() {
@ -56,7 +57,7 @@ $.widget("ui.menubar", {
self._close(); self._close();
return; return;
} }
if (menu.length && (!/^mouse/.test(event.type) || self.active && self.active.is(":visible") )) { if (menu.length && (self.open || event.type == "click")) {
self._open(event, menu); self._open(event, menu);
} }
}) })
@ -81,15 +82,19 @@ $.widget("ui.menubar", {
_close: function() { _close: function() {
this.items.next("ul").hide(); this.items.next("ul").hide();
this.items.removeClass("ui-state-active"); this.items.removeClass("ui-state-active").removeAttr("tabIndex");
this.open = false;
}, },
_open: function(event, menu) { _open: function(event, menu) {
if (this.active) { if (this.active) {
this.active.menu("closeAll").hide(); this.active.menu("closeAll").hide();
this.active.prev().removeClass("ui-state-active"); this.active.prev().removeClass("ui-state-active").removeAttr("tabIndex");
} }
var button = menu.prev().addClass("ui-state-active"); clearTimeout(this.timer);
this.open = true;
// set tabIndex -1 to have the button skipped on shift-tab when menu is open (it gets focus)
var button = menu.prev().addClass("ui-state-active").attr("tabIndex", -1);
this.active = menu.show().position({ this.active = menu.show().position({
my: "left top", my: "left top",
at: "left bottom", at: "left bottom",