Schede jQuery UI - Come ottenere l'indice delle schede attualmente selezionate

So che questa domanda specifica è stata posta in passato , ma non ottengo alcun risultato utilizzando l' bind()evento sul jQuery UI Tabsplug-in.

Ho solo bisogno indexdella scheda appena selezionata per eseguire un'azione quando si fa clic sulla scheda. bind()mi permette di collegarmi all'evento select, ma il mio solito metodo per ottenere la scheda attualmente selezionata non funziona. Restituisce l'indice della scheda selezionata in precedenza, non quello nuovo:

var selectedTab = $("#TabList").tabs().data("selected.tabs");

Ecco il codice che sto tentando di utilizzare per ottenere la scheda attualmente selezionata:

$("#TabList").bind("tabsselect", function(event, ui) {

});

Quando utilizzo questo codice, l'oggetto ui ritornaundefined . Dalla documentazione, questo dovrebbe essere l'oggetto che sto usando per agganciarmi all'indice appena selezionato usando ui.tab. L'ho provato alla tabs()chiamata iniziale e anche da solo. Sto facendo qualcosa di sbagliato qui?

Per le versioni dell'interfaccia utente di JQuery precedenti alla 1.9 : ui.indexda eventè quello che vuoi.

Per JQuery UI 1.9 o versioni successive : vedere la risposta di Giorgio Luparia, di seguito.

Se è necessario ottenere l'indice di tabulazione dall'esterno del contesto di un evento di tabulazioni, utilizzare questo:

function getSelectedTabIndex() { 
    return $("#TabList").tabs('option', 'selected');
}

Aggiornamento: dalla versione 1.9 "selezionato" viene modificato in "attivo"

$("#TabList").tabs('option', 'active')

AGGIORNAMENTO [ _{Sun 26/08/2012} ] Questa risposta è diventata così popolare che ho deciso di trasformarla in un vero e proprio blog / tutorial
Visita il mio blog qui per vedere le ultime informazioni di facile accesso per lavorare con le schede in jQueryUI
Incluso anche (anche nel blog) è un jsFiddle

Aggiornare! Nota: nelle versioni più recenti di jQueryUI (1.9+), ui-tabs-selectedè stato sostituito con ui-tabs-active. !!!

So che questo thread è vecchio, ma qualcosa che non ho visto menzionato era come ottenere la "scheda selezionata" (pannello attualmente abbassato) da qualche parte diversa dagli "eventi della scheda". Ho un modo semplice ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

E per ottenere facilmente l'indice, ovviamente c'è il modo elencato sul sito ...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

Tuttavia, potresti usare il mio primo metodo per ottenere l'indice e tutto ciò che desideri su quel pannello abbastanza facilmente ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PS. Se utilizzi una variabile iframe e poi .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), troverai facile farlo anche per le schede selezionate nei frame. Ricorda, jQuery ha già fatto tutto il lavoro duro, non c'è bisogno di reinventare la ruota!

Solo per espandere (aggiornato)

Mi è stata posta la domanda: "E se nella visualizzazione sono presenti più aree di schede?" Ancora una volta, pensa in modo semplice, usa la mia stessa configurazione ma usa un ID per identificare le schede di cui vuoi entrare in possesso.

Ad esempio, se hai:

$('#example-1').tabs();
$('#example-2').tabs();

E vuoi il pannello corrente del secondo set di schede:

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

E se vuoi la scheda EFFETTIVA e non il pannello (davvero facile, motivo per cui non l'ho menzionato prima ma suppongo che lo farò ora, solo per essere accurato)

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

Ancora una volta, ricorda, jQuery ha fatto tutto il lavoro duro, non pensare così tanto.

Se stai utilizzando JQuery UI versione 1.9.0 o successiva, puoi accedere a ui.newTab.index () all'interno della tua funzione e ottenere ciò di cui hai bisogno.

Per le versioni precedenti utilizzare ui.index .

var $tabs = $('#tabs-menu').tabs();
// jquery ui 1.8
var selected = $tabs.tabs('option', 'selected');
// jquery ui 1.9+
var active = $tabs.tabs('option', 'active');

Quando provi ad accedere all'oggetto ui? ui sarà indefinito se provi ad accedervi al di fuori dell'evento bind. Inoltre, se questa riga

var selectedTab = $("#TabList").tabs().data("selected.tabs");

viene eseguito in questo caso:

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

selectedTab sarà uguale alla scheda corrente in quel momento (quella "precedente".) Questo perché l'evento "tabsselect" viene chiamato prima che la scheda selezionata diventi la scheda corrente. Se vuoi ancora farlo in questo modo, usando "tabsshow" invece risulterà in selectedTab uguale alla scheda cliccata.

Tuttavia, sembra troppo complesso se tutto ciò che vuoi è l'indice. ui.index dall'interno dell'evento o $ ("# TabList"). tabs (). data ("selected.tabs") all'esterno dell'evento dovrebbe essere tutto ciò di cui hai bisogno.

questo è cambiato con la versione 1.9

qualcosa di simile a

 $(document).ready(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    var act = $("#tabs").tabs("option", "active");
                    $("#<%= hidLastTab.ClientID %>").val(act);
                    //console.log($(ui.newTab));
                    //console.log($(ui.oldTab));
                }
            });

            if ($("#<%= hidLastTab.ClientID %>").val() != "") 
            {
                $("#tabs").tabs("option", "active", $("#<%= hidLastTab.ClientID %>").val());
            }


        });

dovrebbe essere usato. Funziona bene per me ;-)

Nel caso qualcuno abbia provato ad accedere alle schede dall'interno di un iframe, potresti notare che non è possibile. La divparte della scheda non viene mai contrassegnata come selezionata, così come nascosta o non nascosta. Il collegamento stesso è l'unico pezzo contrassegnato come selezionato.

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus"><a href="#tabs-4">Tab 5</a></li>

Quanto segue ti darà il hrefvalore del link che dovrebbe essere lo stesso dell'ID per il tuo contenitore di schede:

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

Questo dovrebbe funzionare anche al posto di: $tabs.tabs('option', 'selected');

È meglio nel senso che invece di ottenere solo l'indice della scheda, ti dà l'ID effettivo della scheda.

il modo più semplice per farlo è

$("#tabs div[aria-hidden='false']");

e per index

$("#tabs div[aria-hidden='false']").index();

Nel caso in cui trovi Indice della scheda Attiva e quindi punta su Scheda attiva

Per prima cosa ottieni l'indice attivo

var activeIndex = $("#panel").tabs('option', 'active');

Quindi, utilizzando la classe CSS, ottieni il pannello del contenuto della scheda

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex]; 

ora lo avvolge nell'oggetto jQuery per utilizzarlo ulteriormente

 var tabContent$ = $(element);

qui voglio aggiungere due informazioni a cui .ui-tabs-navè associata la classe per la navigazione ed .ui-tabs-panelè associata al pannello del contenuto della scheda. in questo link demo nel sito web di jquery ui vedrai che questa classe è usata - http://jqueryui.com/tabs/#manipulation

$( "#tabs" ).tabs( "option", "active" )

quindi avrai l'indice della scheda da 0

semplice

Prova quanto segue:

var $tabs = $('#tabs-menu').tabs();

var selected = $tabs.tabs('option', 'selected');

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;

Ho scoperto che il codice qui sotto fa il trucco. Imposta una variabile dell'indice della scheda appena selezionato

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});

Puoi postare sotto la risposta nel tuo prossimo post

var selectedTabIndex= $("#tabs").tabs('option', 'active');

Un altro modo per ottenere l'indice della scheda selezionata è:

var index = jQuery('#tabs').data('tabs').options.selected;

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

Nella variabile url otterrai l'HREF / URL della scheda corrente

Puoi trovarlo tramite:

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});

prendi una variabile nascosta come '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'e sull'evento onclick di ogni scheda scrivi codice come ...

<li><a href="#tabs-0" onclick="document.getElementById('sel_tab').value=0;" >TAB -1</a></li>
<li><a href="#tabs-1" onclick="document.getElementById('sel_tab').value=1;" >TAB -2</a></li>

puoi ottenere il valore di "sel_tab" nella pagina pubblicata. :), semplice !!!

Se vuoi assicurarti che ui.newTab.index()sia disponibile in tutte le situazioni (schede locali e remote), chiamalo nella funzione di attivazione come dice la documentazione :

$("#tabs").tabs({
        activate: function(event, ui){
             alert(ui.newTab.index());
             // You can also use this to set another tab, see fiddle...
             // $("#other-tabs").tabs("option", "active", ui.newTab.index());                   
        },
});

http://jsfiddle.net/7v7n0v3j/

$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});