jQuery UI Tabs - Jak uzyskać indeks aktualnie wybranej karty

112

Wiem, że to konkretne pytanie zadawano już wcześniej , ale nie uzyskuję żadnych wyników przy użyciu bind()zdarzenia we jQuery UI Tabswtyczce.

Potrzebuję tylko indexnowo wybranej karty, aby wykonać akcję po kliknięciu karty. bind()pozwala mi podłączyć się do wybranego zdarzenia, ale moja zwykła metoda uzyskiwania aktualnie wybranej karty nie działa. Zwraca poprzednio wybrany indeks kart, a nie nowy:

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

Oto kod, którego próbuję użyć, aby uzyskać aktualnie wybraną kartę:

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

});

Kiedy używam tego kodu, obiekt ui wracaundefined . Z dokumentacji wynika, że ​​powinien to być obiekt, którego używam do podpięcia się do nowo wybranego indeksu za pomocą ui.tab. Próbowałem tego na pierwszej tabs()rozmowie, a także samodzielnie. Czy ja tu robię coś złego?

Mark Struzinski
źródło

Odpowiedzi:

71

Dla wersji interfejsu użytkownika JQuery wcześniejszych niż 1.9 : ui.indexz eventtego, czego chcesz.

W przypadku interfejsu użytkownika JQuery w wersji 1.9 lub nowszej : zobacz odpowiedź Giorgio Luparii poniżej.

plac Czerwony
źródło
Bardzo ładna odpowiedź! Zamieściłem podsumowanie tego, co zrobiłeś na stronie, aby ułatwić uzyskanie odpowiedzi.
uroczysty
Na zdrowie, Q wspomniał, że obiekt ui jest pusty, dlatego ui.index nie powiedzie się. Myślę, że odpowiedź może nie być taka prosta, jak włączenie tego.
redsquare
To była doskonała odpowiedź i dzięki za wspaniały przykład! Próbowałem zrobić wszystko za jednym zamachem, ale to nie działało. Po tym, jak to rozdzieliłem, wszystko działało zgodnie z reklamą.
Mark Struzinski
4
Odpowiedź jest tam - użyj właściwości ui.index, aby uzyskać bieżący indeks w zdarzeniu tabselect .....
redsquare
17
Odpowiedź powinna zostać zaktualizowana, ponieważ nie działa z interfejsem JQuery w wersji 1.9.0. Powinieneś zmienić ui.index na ui.newTab.index () zgodnie z Przewodnikiem aktualizacji ( jqueryui.com/upgrade-guide/1.9/… )
Giorgio Luparia
201

Jeśli chcesz uzyskać indeks tabulatorów spoza kontekstu zdarzenia tabs, użyj tego:

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

Aktualizacja: od wersji 1.9 „wybrane” zmienia się na „aktywne”

$("#TabList").tabs('option', 'active')
Contra
źródło
2
W każdym razie wydawało mi się, że tego potrzebowałem.
El Yobo
2
Wygląda na to, że w rzeczywistości jest to karta domyślna, a nie aktualnie wybrana. czego mi brakuje? 42 głosy nie mogą się mylić, prawda? jqueryui.com/demos/tabs/#option-selected
Patrick Szalapski,
Tak, to rozwiązanie pomogło. Dzięki @Contra
Ashwin
9
Zmieniono nazwę opcji „wybrane” na „aktywne” w interfejsie użytkownika jQuery w wersji 1.9 (patrz jqueryui.com/changelog/1.9.0 )
jake
43

UPDATE [ Sun 26.08.2012 ] Ta odpowiedź stała się tak popularna, że postanowiłem zrobić go w pełnoprawny bloga / poradnik
proszę odwiedzić Mój blog tutaj , aby zobaczyć najnowsze informacje w łatwym dostępie do pracy z kartami w jQueryUI
obejmował również (również na blogu) to jsFiddle


Aktualizacja! Uwaga: w nowszych wersjach jQueryUI (1.9+),ui-tabs-selected został zastąpiony przez ui-tabs-active. !!!


Wiem, że ten wątek jest stary, ale nie wspomniałem o tym, jak uzyskać „wybraną kartę” (aktualnie rozwijany panel) z innego miejsca niż „zdarzenia na karcie”. Mam prosty sposób ...

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

Aby łatwo uzyskać indeks, istnieje oczywiście sposób wymieniony na stronie ...

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

Możesz jednak użyć mojej pierwszej metody, aby uzyskać indeks i wszystko, co chcesz w tym panelu, całkiem łatwo ...

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

PS. Jeśli użyjesz zmiennej iframe, a następnie .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), łatwo będzie to zrobić również dla wybranych zakładek w ramkach. Pamiętaj, jQuery wykonał już całą ciężką pracę, nie ma potrzeby odkrywania koła na nowo!

Tylko do rozwinięcia (zaktualizowane)

Pojawiło się pytanie: „A jeśli w widoku jest więcej niż jeden obszar zakładek?” Ponownie, pomyśl prosto, użyj tej samej konfiguracji, ale użyj identyfikatora, aby określić, które karty chcesz zdobyć.

Na przykład, jeśli masz:

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

I chcesz, aby bieżący panel drugiej karty był ustawiony:

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

A jeśli chcesz zakładkę RZECZYWISTE, a nie panel (naprawdę łatwe, dlatego wcześniej o tym nie wspominałem, ale przypuszczam, że teraz będę, żeby być dokładnym)

// 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+

Pamiętaj, że jQuery wykonał całą ciężką pracę, nie myśl tak mocno.

SpYk3HH
źródło
Wspaniale, dziękuje! Jeśli chcesz, możesz również podać to jako odpowiedź na stackoverflow.com/q/1864219/11992 .
ników
Właśnie tego potrzebowałem - dzięki!
Justin Ethier
5
Nazwa opcji „wybrane” została zmieniona na „aktywna” w interfejsie użytkownika jQuery w wersji 1.9 (patrz jqueryui.com/changelog/1.9.0).
jake
41

Jeśli używasz interfejsu użytkownika JQuery w wersji 1.9.0 lub nowszej, możesz uzyskać dostęp do ui.newTab.index () wewnątrz swojej funkcji i uzyskać to, czego potrzebujesz.

We wcześniejszych wersjach użyj ui.index .

Giorgio Luparia
źródło
6
Byłoby wspaniale, gdybyś mógł uściślić swoją odpowiedź o dodatkowe szczegóły.
Sledge
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');
MeneerBij
źródło
11

Kiedy próbujesz uzyskać dostęp do obiektu interfejsu użytkownika? interfejs użytkownika będzie niezdefiniowany, jeśli spróbujesz uzyskać do niego dostęp poza zdarzeniem bind. Ponadto, jeśli ta linia

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

jest uruchamiany w takim przypadku:

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

selectedTab będzie odpowiadać bieżącej karcie w tym momencie („poprzedniej”). Dzieje się tak, ponieważ zdarzenie „tabsselect” jest wywoływane, zanim kliknięta karta stanie się bieżącą kartą. Jeśli nadal chcesz to zrobić w ten sposób, użycie opcji „tabsshow” spowoduje, że selectedTab będzie równe klikniętej karcie.

Wydaje się to jednak zbyt skomplikowane, jeśli chcesz tylko indeksu. ui.index z poziomu zdarzenia lub $ ("# TabList"). tabs (). data ("selected.tabs") poza wydarzeniem powinno wystarczyć.

Ben Koehler
źródło
@Ben: Twoje rozwiązanie podaje poprzednio wybraną kartę jako indeks w momencie wyzwolenia zdarzenia tabsselect.
Michael Mao,
1
@Michael: Przeczytałeś moją odpowiedź, czy po prostu złapałeś kod? W mojej odpowiedzi stwierdzam, że kod nie będzie działał tak jak jest i podam kilka alternatyw (zdarzenie 'tabshow'; ui.index; $ ('TabList'). Tabs (). Data ('selected.tabs'))
Ben Koehler
: Przepraszam za spóźnioną odpowiedź. Tak, ui.index działa dobrze. Chciałem tylko zwrócić uwagę na fakt, że selected.tabs podaje "poprzednio" wybraną zakładkę, a nie tę, która jest leczona. Nie mam na myśli twojej odpowiedzi.
Michael Mao,
5

zmieniło się to w wersji 1.9

coś jak

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


        });

powinien być używany. To działa dobrze dla mnie ;-)

user1714346
źródło
4

Jeśli ktoś próbował uzyskać dostęp do kart z elementu iframe, możesz zauważyć, że nie jest to możliwe. Karta divnigdy nie jest oznaczana jako wybrana, tylko jako ukryta lub nieukryta. Sam link jest jedynym elementem oznaczonym jako wybrany.

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

Poniższe informacje podają hrefwartość linku, która powinna być taka sama, jak identyfikator kontenera kart:

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

Powinno to również działać zamiast: $tabs.tabs('option', 'selected');

Jest to lepsze w tym sensie, że zamiast po prostu pobrać indeks karty, podaje rzeczywisty identyfikator karty.

Lanca
źródło
4

najłatwiej to zrobić

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

i dla indeksu

$("#tabs div[aria-hidden='false']").index();
Vishal Sharma
źródło
4

W przypadku, gdy znajdziesz Aktywną kartę Indeks, a następnie wskaż Aktywną kartę

Najpierw pobierz indeks aktywny

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

Następnie używając klasy css pobierz panel zawartości zakładki

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

teraz zawinął go w obiekt jQuery, aby go dalej używać

 var tabContent$ = $(element);

tutaj chcę dodać dwie informacje, które klasa .ui-tabs-navjest związana z nawigacją i .ui-tabs-paneljest skojarzona z panelem zawartości karty. w tym linku demo w witrynie jquery ui zobaczysz, że ta klasa jest używana - http://jqueryui.com/tabs/#manipulation

dekdev
źródło
3
$( "#tabs" ).tabs( "option", "active" )

wtedy będziesz miał indeks zakładki od 0

prosty

Qin Wang
źródło
2

Spróbuj wykonać następujące czynności:

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

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

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;
Fabio
źródło
2

Poniższy kod załatwia sprawę. Ustawia zmienną indeksu nowo wybranej karty

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});
Brian M.
źródło
2

Poniżej możesz zamieścić odpowiedź w swoim następnym poście

var selectedTabIndex= $("#tabs").tabs('option', 'active');
Mike Clark
źródło
Ta odpowiedź jest przydatna do znalezienia bieżącej aktywnej karty, szczególnie gdy nie jest to kontekst zdarzenia wyboru karty.
hrabinowitz
1

Innym sposobem uzyskania indeksu wybranej karty jest:

var index = jQuery('#tabs').data('tabs').options.selected;
krzyżmo
źródło
1
$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

W zmiennej url otrzymasz HREF / URL aktualnej karty

Chandre Gowda
źródło
1

Możesz go znaleźć poprzez:

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});
Pertr Pavliuk
źródło
0

weź ukrytą zmienną, taką jak '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'i na każdym zdarzeniu onclick napisz kod, taki jak ...

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

możesz uzyskać wartość „sel_tab” na opublikowanej stronie. :) , prosty !!!

Paresh
źródło
2
Nie głosowałem na Ciebie, ale nie ma powodu dla dodatkowego znacznika i wbudowanego JavaScript. Zwłaszcza, że ​​już używa jQuery ...
Justin Ethier,
0

Jeśli chcesz się upewnić, że ui.newTab.index()jest dostępny we wszystkich sytuacjach (zakładki lokalne i zdalne), wywołaj to w funkcji aktywuj, jak mówi dokumentacja :

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

prograhammer
źródło
0
$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});
iman64
źródło
1
Witamy w Stack Overflow! Chociaż linki to świetny sposób na dzielenie się wiedzą, tak naprawdę nie odpowiedzą na pytanie, jeśli w przyszłości zostaną zerwane. Dodaj do swojej odpowiedzi zasadniczą treść linku, który odpowiada na pytanie. W przypadku, gdy treść jest zbyt złożona lub zbyt duża, aby się tutaj zmieścić, opisz ogólną ideę proponowanego rozwiązania. Pamiętaj, aby zawsze zachować odsyłacz do strony internetowej oryginalnego rozwiązania. Zobacz: Jak napisać dobrą odpowiedź?
sɐunıɔ ןɐ qɐp