jQuery UI menubar from jqueryui.com git master allows keyboard navigation if it is active.
I'm looking for a way to activate menubar from keyboard. I tried code below. Right Alt / AltGr key is catched. However arrow keys are still ignored in menu. It looks like first bar menu pad should be opened for keyboard navigation to take effect or something similar. How to activate menu from keyboard so keyboard can used without need for mouse click?
<head><script type="text/javascript">
$(function () {
$(document).bind('keyup', function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode === 17) { // 17 = Right ALT / AltrGR
$("#bar1").focus();
}
});
</script></head>
<body>
<div id="container">
<div id="bar1">
<% Html.RenderAction("Menu", "Home"); %>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</body>
UPDATE
According Pehmolelu answer it looks like first submenu from menubar should activated. Menubar.js code from jQuery UI tests is below. How to find and activate first menu bar so that keyboard keys can used to navigate ?
/*
* jQuery UI menubar
*
* backported from Michael Lang's fork:
http://www.nexul.com/prototypes/toolbar/demo.html
*/
(function($) {
// TODO take non-menubar buttons into account
$.widget("ui.menubar", {
options: {
buttons: false,
menuIcon: false
},
_create: function() {
var self = this;
var items = this.items = this.element.children("button, a");
var o = this.options;
this.element.addClass('ui-menubar ui-widget-header ui-helper-clearfix');
items.next("ul").each(function(i, elm) {
$(elm).menu({
select: function(event, ui) {
ui.item.parents("ul:last").hide()
self.options.select.apply(this, arguments);
}
}).hide().keydown(function(event) {
var menu = $(this);
if (menu.is(":hidden"))
return;
event.stopPropagation();
switch (event.keyCode) {
case $.ui.keyCode.LEFT:
self.left(event);
event.preventDefault();
break;
case $.ui.keyCode.RIGHT:
self.right(event);
event.preventDefault();
break;
case $.ui.keyCode.TAB:
self[ event.shiftKey ? "left" : "right" ]( event );
event.preventDefault();
break;
};
});
});
items.each(function() {
var input = $(this),
menu = input.next("ul");
input.bind("click focus mouseenter", function(event) {
event.preventDefault();
event.stopPropagation();
if (menu.is(":visible") && self.active && self.active[0] == menu[0]) {
self._close();
return;
}
if (menu.length && (!/^mouse/.test(event.type) || self.active && self.active.is(":visible") )) {
self._open(event, menu);
}
})
.addClass("ui-button ui-widget ui-button-text-only ui-menubar-link")
.wrapInner("<span class='ui-button-text'></span>");
self._hoverable(input)
if (o.menuIcon) {
input.addClass("ui-state-default").append("<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>");
input.removeClass("ui-button-text-only").addClass("ui-button-text-icon-secondary");
}
if (!o.buttons) {
input.addClass('ui-menubar-link').removeClass('ui-state-default');
};
});
$(document).click(function(event) {
!$(event.target).closest(".ui-menubar").length && self._close();
});
},
_close: function() {
this.items.next("ul").hide();
this.items.removeClass("ui-state-active");
},
_open: function(event, menu) {
if (this.active) {
this.active.menu("closeAll").hide();
this.active.prev().removeClass("ui-state-active");
}
var button = menu.prev().addClass("ui-state-active");
this.active = menu.show().position({
my: "left top",
at: "left bottom",
of: button
}).focus();
},
left: function(event) {
var prev = this.active.prevAll( ".ui-menu" ).eq( 0 );
if (prev.length) {
this._open(event, prev);
} else {
this._open(event, this.element.children(".ui-menu:last"));
}
},
right: function(event) {
var next = this.active.nextAll( ".ui-menu" ).eq( 0 );
if (next.length) {
this._open(event, next);
} else {
this._open(event,
this.element.children(".ui- menu:first"));
}
}
});
}(jQuery));