6

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

一般に、水平タブの場合、ユーザーは、タブを移動するよりも、上下のキーでページをスクロールすることに慣れています。上下キーのみのタブ ナビゲーションを無効にすることはできますか?

アップデート

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

   $('#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;
        };
    });
4

3 に答える 3

2

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;
        }
于 2013-08-07T03:19:42.127 に答える
1

自分でこれをしなければなりませんでした。これは私のために働いたものです：

$.widget("ui.tabs", $.ui.tabs, {
    _tabKeydown: function (event) {
        if (event.keyCode !== 38 && event.keyCode !== 40) {
            this._super(event);
        }
    }
});
于 2014-08-19T19:18:46.943 に答える