Question

jQuery UI选项卡具有此“功能”，如果我按向上/向左或向下/向右键箭头，它会切换选项卡并加载该选项卡。

通常对于水平制表符，用户更熟悉使用向上和向下键滚动页面与移动制表符。是否可以仅为向上和向下键禁用选项卡导航？

更新

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

Answer 1

是的，您可以处理keydown事件并阻止它。它附在ui-tabs锚点上：

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

Answer 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;
        }

Answer 3

我必须自己做。这对我有用：

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

禁用箭头键导航

3 个答案: