Impedisce il comportamento predefinito della scheda jquery-ui quando si utilizza la navigazione da tastiera

Question

Sto utilizzando le schede jquery-ui e jeditable per modificare in linea il titolo della scheda. Ma navigare con i cursori nel testo modificabile porta jquery-ui a navigare nella scheda adiacente.

Come posso impedire il comportamento predefinito di jquery (disabilitare la navigazione della barra di comando nelle schede).

Cheers, Broncko

Answer 1

risolto da:

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

Answer 2

Una soluzione migliore da qui 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

E 'possibile separare gli eventi KeyDown quando le schede vengono inizializzati:

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

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

Answer 4

Ho dovuto farlo da solo. Questo è ciò che ha funzionato per me:

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

È possibile sostituire qualsiasi combinazione di tasti usando event.keyCode e anche rendere personalizzabile con qualcosa di simile:

$.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 ] }); 

O meglio ancora si può aggiungere il proprio personalizzato Comportamenti:

$.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 
    } 
});