jQuery UI选项卡具有此“功能”,如果我按向上/向左或向下/向右键箭头,它会切换选项卡并加载该选项卡.
通常对于水平制表符,用户更熟悉使用向上和向下键滚动页面与移动制表符.是否可以仅为向上和向下键禁用选项卡导航？
UPDATE
根据康斯坦丁的建议,我尝试了以下代码.单击锚点选项卡后,单击向上或向下键时,它会阻止事件.如果我按下左/右键的另一个键,然后再次按下向上/向下键.它注册事件,但似乎没有停止传播.该事件可以从另一个元素开火吗？这是我的代码：
$('#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;
};
});
解决方法
在jQuery-UI文件中搜索以下代码并注释掉$.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;
}
