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

jQuery UI菜单栏jqueryui.com git主菜单允许键盘导航，如果它是活动的。jQuery UI菜单栏：如何从键盘激活

我正在寻找一种方法来激活键盘菜单栏。我尝试了下面的代码。右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>

UPDATE

根据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));

来源

2011-05-28 Andrus

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

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

但div元素不具有tabIndex真正兼容的定义：http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex

你或许应该把注意力另一元件上，该分区里面，看看它是如何工作的。

编辑：

没有真正了解实际的菜单栏，在所有的，我有一种预感。在开始时它被定义为：

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

所以你选择所有的按钮和锚点作为项目。然后在较低处有这些items.each，其中您将点击焦点和mouseenter事件绑定到每个项目。

所以我会尝试重点到一个按钮或锚项目。

来源

2011-06-20 07:08:55 Pehmolelu

谢谢。我将tabindex ='1'添加到menubar div中。在这种情况下div接收按键上的焦点（虚线矩形出现在div周围）。键盘按键仍然不能用于在菜单中导航，并且菜单不会收到焦点（没有项目突出显示）。我从jQueryUYI添加menubar代码来提问。如何激活菜单栏中的firt子菜单或者是否有其他方法来启用菜单中的导航？ – Andrus 2011-06-22 18:44:58

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

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

这可行，但有一个整容问题。当使用箭头键更改菜单选项时，第一个项目周围会留下橙色的聚焦晕。除此之外，它似乎按预期工作

我尝试使用.menu("focus")方法，而不是像你可能已经发现的那样，重点是在一秒之后再次带走 - 我想因为鼠标不在菜单内区。

来源

2015-10-07 02:29:55

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

回答

相关问题