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


112

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?

Risposte:


71

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.


Risposta molto bella! Ho incluso un riepilogo di ciò che hai fatto nel sito web solo per rendere più facile ottenere la risposta.
torial

Ciao, la Q ha menzionato che l'oggetto ui era nullo, quindi ui.index non funzionerà al momento. Penso che la risposta forse non è così semplice come includerla.
redsquare

Questa è stata una risposta perfetta e grazie per il fantastico esempio! Stavo cercando di fare tutto in 1 ripresa e non funzionava. Dopo averlo diviso, tutto ha funzionato come pubblicizzato.
Mark Struzinski

4
La risposta è lì: usa la proprietà ui.index per ottenere l'indice corrente nell'evento tabselect .....
redsquare

17
La risposta dovrebbe essere aggiornata perché non funziona con JQuery UI 1.9.0. Dovresti cambiare ui.index con ui.newTab.index () in base alla Guida all'aggiornamento ( jqueryui.com/upgrade-guide/1.9/… )
Giorgio Luparia

201

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')

2
Sembrava essere quello di cui avevo bisogno, comunque.
El Yobo

2
Sembra che questo fornisca effettivamente la scheda predefinita, non la scheda attualmente selezionata. Cosa mi manca? 42 voti non possono essere sbagliati, vero? jqueryui.com/demos/tabs/#option-selected
Patrick Szalapski

Sì, questa soluzione ha aiutato. Grazie @Contra
Ashwin

9
L'opzione 'selected' è stata rinominata in 'active' nella versione 1.9 dell'interfaccia utente di jQuery (vedere jqueryui.com/changelog/1.9.0 )
jake

43

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.


Eccellente grazie! Se vuoi, puoi anche fornire questo come risposta a stackoverflow.com/q/1864219/11992 .
nikow

Questo è esattamente ciò di cui avevo bisogno - Grazie!
Justin Ethier

5
L'opzione "selezionata" è stata rinominata "attiva" nella versione 1.9 di jQuery UI (vedere jqueryui.com/changelog/1.9.0).
jake

41

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 .


6
Sarebbe fantastico se potessi arricchire la tua risposta con qualche dettaglio aggiuntivo.
Slitta

12
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');

11

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.


@ Ben: la tua soluzione fornisce la scheda selezionata in precedenza poiché era l'indice quando è stato attivato l'evento tabsselect.
Michael Mao

1
@ Michael: hai letto la mia risposta o hai semplicemente preso il codice? Nella mia risposta dichiaro che il codice non funzionerà così com'è e fornirà alcune alternative ('tabshow' event; ui.index; $ ('TabList'). Tabs (). Data ('selected.tabs'))
Ben Koehler

: Scusa per la mia risposta in ritardo. Sì, ui.index funziona perfettamente. Volevo solo sottolineare il fatto che selected.tabs fornisce la scheda selezionata "precedente", non quella curante. Non intendo offendere la tua risposta.
Michael Mao,

5

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 ;-)


4

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.


4

il modo più semplice per farlo è

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

e per index

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

4

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


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

quindi avrai l'indice della scheda da 0

semplice


2

Prova quanto segue:

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

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

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

2

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();
    }
});

2

Puoi postare sotto la risposta nel tuo prossimo post

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

Questa risposta è utile per trovare la scheda attiva corrente, in particolare quando non è nel contesto di un evento di selezione della scheda.
hrabinowitz

1

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

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

1
$("#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


1

Puoi trovarlo tramite:

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

0

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 !!!


2
Non ti ho votato, ma non c'è motivo per il markup aggiuntivo e JavaScript in linea. Soprattutto perché sta già usando jQuery ...
Justin Ethier

0

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/


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

1
Benvenuto in Stack Overflow! Sebbene i collegamenti siano un ottimo modo per condividere la conoscenza, non risponderanno davvero alla domanda se si interrompono in futuro. Aggiungi alla tua risposta il contenuto essenziale del collegamento che risponde alla domanda. Nel caso in cui il contenuto sia troppo complesso o troppo grande per adattarsi qui, descrivere l'idea generale della soluzione proposta. Ricordarsi di conservare sempre un collegamento di riferimento al sito Web della soluzione originale. Vedi: come scrivo una buona risposta?
sɐunıɔ ןɐ qɐp
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.