jQuery UI 菜单栏：如何从键盘激活答案

【问题标题】：jQuery UI menubar: how to activate from keyboardjQuery UI 菜单栏：如何从键盘激活
【发布时间】：2011-05-28 21:21:17
【问题描述】：

来自 jqueryui.com git master 的 jQuery UI 菜单栏允许键盘导航（如果它处于活动状态）。

我正在寻找一种从键盘激活菜单栏的方法。我尝试了下面的代码。 Right Alt / AltGr 键被捕获。然而，菜单中的箭头键仍然被忽略。看起来应该打开第一个栏菜单板以使键盘导航生效或类似的东西。如何从键盘激活菜单，这样键盘就可以不用鼠标点击了？

    <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>

更新

根据 Pehmolelu 的回答，似乎应该激活菜单栏中的第一个子菜单。来自 jQuery UI 测试的 Menubar.js 代码如下。如何找到并激活第一个菜单栏，以便使用键盘按键进行导航？

/*
 * 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));

【问题讨论】：

标签： jquery jquery-ui menu keyboard-shortcuts jquery-ui-menu

【解决方案1】：

只有将 tabindex 属性赋予 Div 元素才能获得焦点。

<div id="bar1" tabindex="1">

但根据定义，div 元素与 tabindex 并不真正兼容：http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

您可能应该尝试关注该 div 内的其他元素，看看它是如何工作的。

编辑：

根本不知道实际的菜单栏，我有一种预感。一开始是这样定义的：

var items = this.items = this.element.children("button, a");

因此，您选择了所有按钮和锚点作为项目。然后在下面有这个 items.each，您可以在其中将单击焦点和 mouseenter 事件绑定到每个项目。

所以我会尝试将注意力集中在按钮或锚点上。

【讨论】：

谢谢。我将 tabindex='1' 添加到菜单栏 div。在这种情况下，div 在按键上获得焦点（虚线矩形出现在 div 周围）。 Howewer 键盘键仍然无法用于在菜单中导航，并且菜单没有获得焦点（没有突出显示的项目）。我添加了来自 jQueryUYI 的菜单栏代码来提问。如何在菜单栏中激活第一个子菜单或有其他方法可以在菜单中启用导航？

【解决方案2】：

尝试从打开菜单的函数内部对第一个菜单项调用 .focus()。例如：

$("#menu").find("[role=menuitem]")[0].focus();

这可行，但存在外观问题。当使用箭头键更改菜单选择时，会在第一项周围留下橙色焦点光环。除此之外，它似乎按预期工作

我尝试改用.menu("focus") 方法，但正如您可能已经发现的那样，焦点在片刻之后再次被移走——我认为是因为鼠标不在菜单区域内。

【讨论】：