矢印キーでナビゲートを無効にする

Question

jQuery UIタブには、この機能があります。上/左/下/右キーの矢印を押すと、タブが切り替わり、そのタブが読み込まれます。

通常、横向きのタブの場合、上下のキーでページをスクロールし、タブを移動することに慣れています。上下キーのみのタブナビゲーションを無効にすることはできますか？コンスタンチンの提案に基づいて

UPDATE iは、次のコードを試してみました。アンカータブをクリックした直後に、上下キーをクリックするとイベントがブロックされます。もし私が左/右のキーのように別のキーを押した後、もう一度上/下のキーを押してください。イベントを登録しますが、伝播を停止していないようです。他の要素からイベントが発射される可能性はありますか？ここに私のコードです：

$('#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

あなたのjQuery-UIファイルに次のコードを検索し、あなたがそのソースで不要な機能を削除します、かなり

case $.ui.keyCode.DOWN:とcase $.ui.keyCode.UP:をコメントアウト。

_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

はい私は​​イベントを処理し、それを防ぐことができます。 UI-タブアンカーに接続されます：

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

Answer 3

これは自分自身で行う必要があります。これは私のために働いたものです：

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