Fokus Capturing auf einem bestimmten jQueryUI Registerkarte

Question

I jQueryUI Register aufweisen, und auf einer bestimmten Registerkarte Ich habe eine Klick-Funktion (die Ajax-Aufruf funktioniert korrekt) definiert:

$("a[href='#tabs-1ua']").click(function (event, ui) 
{ 

    //ajax call 

}); 

Nun, was ich zu tun versuchen, ist um nicht nur Klicks, sondern jede Art von Fokus auf dieser Registerkarte im Allgemeinen zu berücksichtigen, wie zum Beispiel mit einer Tastaturpfeiltaste zu dieser zu navigieren. Ich habe versucht activate anstelle von click, aber ich habe einen Fehler. Wie kann ich alle Arten von Fokus auf einer bestimmten Registerkarte jQueryUI erfassen?

Vielen Dank.

Answer 1

Ich habe es funktioniert wie folgt:

I initialisiert Tabs in meiner Anwendung mit dem Klassenattribut anstelle einer ID, und in ihm ist spezifizierte die activate Wahl. Dort habe ich die ID des derzeit aktiven Tabs mit $(".tabui .ui-tabs-panel:visible").attr("id");, wobei tabui der Name der Klasse ist. Der Code ist unten.

$('.tabui').tabs({ 

    activate: function (event, ui) 
    { 

     //do something 1 

     var currentTab = $(".tabui .ui-tabs-panel:visible").attr("id"); 

     console.log (currentTab); 

     if(currentTab === "#tabs-1ua") 
     { 
      //do something 2 
     } 


    } 
}); 

Vielen Dank an alle, die versucht haben, mir zu helfen.

Answer 2

Versuchen

$("a[href='#tabs-1ua']").on('click hover', function() { 
// Do something for both 
}); 

Answer 3

focus() standardmäßig von Eingabeelementen akzeptiert wird (<input>, <textarea>, <select>) und nicht <a> Elemente. Versuchen Sie, zuerst einen Tab-Index zum Anker hinzuzufügen:

Answer 4

Sie sollten "tabsactivate" Listener setzen, während die Registerkarte aktiviert wurde. Bitte überprüfen Sie den folgenden Code.

// Tabs ist die ID von UL, in die alle Tabs eingepackt wurden. Bitte ersetzen Sie es mit Ihrem Code.

$('#tabs').tabs({ 
    activate: function(event ,ui){ 
     if(ui.newTab.attr('href')=='#tabs-1ua'){ 
      //make ajax call 
     } 
}); 

Answer 5

Sie müssen die focus Ereignis für Schlüssel Bewegung verwenden, und es für Mausklicks auch nutzen können. Das Ereignis focus und ähnliche Ereignisse sind in ihrem Verhalten notorisch eigenartig, insbesondere im Hinblick darauf, wie sie in Frameworks und Plugins implementiert sind. Obwohl ich nicht genau sagen kann, warum, focus auf dem a Element auf einen Mausklick ausgelöst wird, und focus auf dem umschließenden li Element wird ausgelöst, wenn Sie zu dem Element mit Schlüsseln navigieren. (Getestet mit Chrome.) Also:

$("#myTabs").tabs(); 
$('#myTabs li, #myTabs a').on('focus', function(e, ui){ 
    //do whatever 
}); 

Demo