jQuery UI barra de menú de jqueryui.com git master permite la navegación con el teclado si está activo.jQuery UI menubar: cómo activar desde el teclado
Estoy buscando una forma de activar la barra de menú desde el teclado. Probé el código a continuación. La tecla derecha Alt/AltGr está atrapada. Sin embargo, las teclas de flecha todavía se ignoran en el menú. Parece que el panel de menú de la primera barra debe estar abierto para que la navegación del teclado surta efecto o algo similar. ¿Cómo activar el menú desde el teclado para que el teclado pueda usarse sin necesidad de hacer clic con el mouse?
<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>
ACTUALIZACIÓN
Según Pehmolelu responda a esto se parece a primera submenú desde la barra de menú debe activarse. El código Menubar.js de las pruebas jQuery UI está debajo. ¿Cómo encontrar y activar la primera barra de menú para que las teclas del teclado puedan usarse para navegar?
/*
* 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));
Gracias. Agregué tabindex = '1' a menubar div. En este caso, div recibe foco en la pulsación de tecla (el rectángulo punteado aparece alrededor de div). Sin embargo, algunas teclas del teclado aún no se pueden usar para navegar en el menú y el menú no recibe el foco (no se resaltan los elementos). Agregué código de barra de menú de jQueryUYI a la pregunta. ¿Cómo activar un submenú en la barra de menú o hay otra forma de habilitar la navegación en el menú? – Andrus