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菜單欄：如何從鍵盤激活

回答

相關問題