Zapobieganie domyślnemu zachowaniu zakładki jquery-ui podczas korzystania z nawigacji po klawiaturze

Question

Używam kart jquery-ui i jeditable do wstawiania edycji tytułu karty. Ale nawigacja kursorami w edytowalnym tekście prowadzi do jquery-ui, aby przejść do zakładki obok niego.

W jaki sposób można zapobiec domyślnemu zachowaniu jquery (wyłączanie nawigacji klawiszem na kartach).

Cheers, Broncko

Answer 1

rozwiązany przez:

$.widget("ui.tabs", $.ui.tabs, { 
    options: { 
     keyboard: true 
    }, 
    _tabKeydown: function(e) { 
     if(this.options.keyboard) { 
     this._super('_tabKeydown'); 
     } else { 
     return false; 
     } 
    } 
}); 

Answer 2

lepszym rozwiązaniem stąd http://www.daveoncode.com/2013/09/18/how-to-disable-keyboard-navigation-in-jquery-ui-tabs/:

jQuery('.foo').tabs({ 
activate: function(e, ui) { 
    e.currentTarget.blur(); 
    } 
}); 

Answer 3

Jest możliwe, aby rozpiąć keyDown zdarzenia, gdy języczki są inicjowane:

$('#tabs').tabs({ 
    create : function() { 
    var data = $(this).data('tabs'); 

    data.tabs.add(data.panels).off('keydown'); 
    } 
}); 

Answer 4

Po prostu musiałem to zrobić sam. To jest to, co pracował dla mnie:

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

można zastąpić dowolną kombinację klawiszy za pomocą event.keyCode a nawet uczynić go dostosować z czymś takim:

$.widget("ui.tabs", $.ui.tabs, { 
    options: { 
     overrideKeyCodes: [], 
    }, 
    _tabKeydown: function (event) { 
     var isOverride = false; 
     if (Object.prototype.toString.call(this.options.overrideKeyCodes) === '[object Array]') { 
      for (i = 0; i < this.options.overrideKeyCodes.length; i++) { 
       if (event.keyCode === this.options.overrideKeyCodes[i]) { 
        isOverride = true; 
        break; 
       } 
      } 
     } 

     if (!isOverride) { 
      this._super(event); 
     } 
    } 
}); 

$('#MyTabs').tabs({ overrideKeyCodes: [ 38, 40 ] }); 

lub nawet lepiej można dodać swój własny Zachowania:

$.widget("ui.tabs", $.ui.tabs, { 
    options: { 
     overrideKeyCodes: {}, 
    }, 
    tabKeydown: function (event) { 
     if (this.options.overrideKeyCodes.hasOwnProperty(event.keyCode)) { 
      if (typeof this.options.overrideKeyCodes[event.keyCode] === 'function') { 
       this.options.overrideKeyCodes[event.keyCode](event, this._super(event)); 
      } 
     } 
     else { 
      this._super(event); 
     } 
    } 
}); 

$('#MyTabs').tabs({ 
    overrideKeyCodes: { 
     40: function (event, callback) { 
      console.log(event.keyCode); 
     }, 
     38: function (event, callback) { 
      console.log(event.keyCode); 
      if (callback) { 
       callback(); 
      } 
     }, 
     32: null //just let the space happen 
    } 
});