jQuery UI Tabs - Jak uzyskać indeks aktualnie wybranej karty

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?

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.

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

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.

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 .

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

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

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

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.

najłatwiej to zrobić

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

i dla indeksu

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

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

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

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

prosty

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;

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

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

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

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

Innym sposobem uzyskania indeksu wybranej karty jest:

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

W zmiennej url otrzymasz HREF / URL aktualnej karty

Możesz go znaleźć poprzez:

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

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

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/

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