Wyłącz nawigację za pomocą klawiszy strzałek

Question

Zakładki jQuery UI mają tę "funkcję", w której, gdy naciska się strzałki w górę/w lewo lub w dół/w prawo, przełączają zakładki i ładują tę zakładkę.

Ogólnie dla zakładek poziomych użytkownicy lepiej znają klawisze "w górę" i "w dół" przewijają karty stron w ruchu. Czy można wyłączyć nawigację po kartach tylko za klawisze góra i dół?

UPDATE

podstawie sugestii Konstantin za Próbowałem następujący kod. Blokuje zdarzenie po kliknięciu klawisza w górę lub w dół, zaraz po kliknięciu zakładki zakotwiczenia. Jeśli uderzę w inny klawisz, jak lewy/prawy klawisz, a następnie ponownie naciśnij klawisz w górę/w dół. Rejestruje zdarzenie, ale wydaje się, że nie zatrzymuje ono propagacji. Czy zdarzenie mogło wystrzelić z innego elementu? Oto mój kod:

$('#tabs').keydown(function (event) { 
     console.log("in tabs"); 
     if (event.keyCode == 40 || event.keyCode == 38) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      return false; 
     }; 
    }); 
    $('.ui-tabs-anchor').keydown(function (event) { 
     console.log("in ui tabs anchor"); 
     if (event.keyCode == 40 || event.keyCode == 38) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      return false; 
     }; 
    }); 

    $('.ui-tabs-nav').keydown(function (event) { 
     console.log("in ui tabs nav"); 
     if (event.keyCode == 40 || event.keyCode == 38) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      return false; 
     }; 
    }); 

Answer 1

Szukaj następującego kodu w pliku jQuery UI i wykomentuj case $.ui.keyCode.DOWN: i case $.ui.keyCode.UP:

Dość dużo będzie usunięcie niechcianych funkcjonalność u źródła.

_tabKeydown: function(event) { 
     var focusedTab = $(this.document[0].activeElement).closest("li"), 
      selectedIndex = this.tabs.index(focusedTab), 
      goingForward = true; 

     if (this._handlePageNav(event)) { 
      return; 
     } 

     switch (event.keyCode) { 
      case $.ui.keyCode.RIGHT: 
//IMPORTANT BIT case $.ui.keyCode.DOWN: 
       selectedIndex++; 
       break; 
//IMPORTANT BIT case $.ui.keyCode.UP: 
      case $.ui.keyCode.LEFT: 
       goingForward = false; 
       selectedIndex--; 
       break; 
      case $.ui.keyCode.END: 
       selectedIndex = this.anchors.length - 1; 
       break; 
      case $.ui.keyCode.HOME: 
       selectedIndex = 0; 
       break; 
      case $.ui.keyCode.SPACE: 
       // Activate only, no collapsing 
       event.preventDefault(); 
       clearTimeout(this.activating); 
       this._activate(selectedIndex); 
       return; 
      case $.ui.keyCode.ENTER: 
       // Toggle (cancel delayed activation, allow collapsing) 
       event.preventDefault(); 
       clearTimeout(this.activating); 
       // Determine if we should collapse or activate 
       this._activate(selectedIndex === this.options.active ? false : selectedIndex); 
       return; 
      default: 
       return; 
     } 

Answer 2

Tak, możesz sobie poradzić ze zdarzeniem keydown i temu zapobiec. Jest przywiązany do kotwicy ui-karty:

$('.ui-tabs-anchor').keydown(function (event) { 
    return false; 
}); 

Answer 3

Po prostu musiałem to zrobić sam. To właśnie zadziałało dla mnie:

$.widget("ui.tabs", $.ui.tabs, { 
    _tabKeydown: function (event) { 
     if (event.keyCode !== 38 && event.keyCode !== 40) { 
      this._super(event); 
     } 
    } 
});