jQuery UI Sekmeleri - Şu Anda Seçili Sekme Dizini Nasıl Gidilir?

Bu özel sorunun daha önce sorulduğunu biliyorum , ancak bind()etkinliği kullanarak herhangi bir sonuç alamıyorum .jQuery UI Tabs eklentideki .

Sadece ihtiyacım indexsekme tıklandığında bir eylemi gerçekleştirmek için yeni seçilen sekmenin. bind()select olayına bağlanmama izin veriyor, ancak o anda seçili sekmeyi almak için her zamanki yöntemim çalışmıyor. Yenisini değil, önceden seçilen sekme dizinini döndürür:

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

Şu anda seçili sekmeyi almak için kullanmaya çalıştığım kod:

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

});

Bu kodu kullandığımda, ui nesnesi geri geliyorundefined . Belgelerden, ui.tab kullanarak yeni seçilen dizine bağlamak için kullandığım nesne bu olmalıdır. Bunu ilk tabs()aramada ve kendi başına denedim . Burada yanlış bir şey mi yapıyorum?

1.9 önce JQuery UI sürümleri için : ui.indexdan eventistediğiniz şeydir.

JQuery UI 1.9 veya sonrası için : bkz cevabı aşağıda, Giorgio Luparia tarafından.

Sekme dizinini bir sekme etkinliğinin bağlamının dışından almanız gerekiyorsa, şunu kullanın:

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

Güncelleme: 1.9 sürümünden itibaren 'seçildi', 'etkin' olarak değiştirildi

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

GÜNCELLEME [ _{Sun 08/26/2012} ] Bu yanıt o kadar popüler hale geldi ki, onu tam teşekküllü bir blog / eğitim haline getirmeye karar verdim jQueryUI'de sekmelerle çalışmaya yönelik kolay erişim bilgilerindeki en son bilgileri görmek için
lütfen Blogum Burayı ziyaret edin Ayrıca dahil (blogda da) bir jsFiddle

Güncelleme! Lütfen dikkat: jQueryUI'nin (1.9+) daha yeni sürümlerinde, ui-tabs-selectedile değiştirilmiştir ui-tabs-active. !!!

Bu iş parçacığının eski olduğunu biliyorum, ancak bahsettiğim görmediğim bir şey "seçili sekmeyi" (Şu anda açılan panel) "sekme olayları" dışında bir yerden nasıl alacağımdı. Basit bir yolum var ...

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

Ve dizini kolayca almak için, elbette sitede listelenen bir yol var ...

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

Ancak, indeksi ve bu panel hakkında istediğiniz her şeyi oldukça kolay almak için ilk yöntemimi kullanabilirsiniz ...

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

PS. Bir iframe değişkeni kullanırsanız ve sonra .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), bunu çerçevelerdeki seçili sekmeler için de kolayca yapabilirsiniz. Unutmayın, jQuery tüm zor işi zaten yaptı, tekerleği yeniden icat etmeye gerek yok!

Sadece genişletmek için (güncellendi)

Soru bana soruldu, "Ya görünümde birden fazla sekme alanı varsa?" Yine, basit düşünün, aynı kurulumumu kullanın, ancak hangi sekmeleri ele geçirmek istediğinizi belirlemek için bir kimlik kullanın.

Örneğin, varsa:

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

Ve ikinci sekme kümesinin geçerli panelini istiyorsunuz:

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

Ve paneli değil de GERÇEK sekmesini istiyorsanız (gerçekten kolay, bu yüzden bundan daha önce bahsetmedim ama sanırım şimdi yapacağım, sadece kapsamlı olmak için)

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

Yine, unutmayın, tüm zor işi jQuery yaptı, çok fazla düşünme.

JQuery UI 1.9.0 veya üstünü kullanıyorsanız, işlevinizin içinden ui.newTab.index () 'e erişebilir ve ihtiyacınız olanı alabilirsiniz.

Önceki sürümler için şunu kullanın: 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');

UI nesnesine ne zaman erişmeye çalışıyorsunuz? bind olayının dışında ona erişmeye çalışırsanız ui tanımsız olacaktır. Ayrıca, eğer bu satır

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

aşağıdaki gibi olayda çalıştırılır:

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

selectedTab o andaki mevcut sekmeye ("önceki" sekme) eşit olacaktır. Bunun nedeni, "tabsselect" olayının, tıklanan sekme geçerli sekme haline gelmeden önce çağrılmasıdır. Yine de bu şekilde yapmak istiyorsanız, bunun yerine "tabsshow" kullanmak, selectedTab'ın tıklanan sekmeye eşit olmasına neden olacaktır.

Ancak, istediğiniz tek şey indeksse, bu aşırı karmaşık görünüyor. Olay içindeki ui.index veya olayın dışındaki $ ("# TabList"). tabs (). data ("selected.tabs") ihtiyacınız olan her şey olmalıdır.

bu 1.9 sürümüyle değişti

gibi bir şey

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


        });

kullanılmalıdır. Bu benim için iyi çalışıyor ;-)

Herhangi birinin bir iframe içinden sekmelere erişmeye çalışması durumunda, bunun mümkün olmadığını fark edebilirsiniz. divGizli, seçilmiş gibi gizli veya değil gibi bir sekme asla işaretlenmiş alır. Bağlantının kendisi, seçili olarak işaretlenen tek parçadır.

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

Aşağıdakiler, hrefsekme kapsayıcınızın kimliğiyle aynı olması gereken bağlantının değerini size verecektir :

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

Bu, aşağıdakilerin yerine de çalışmalıdır: $tabs.tabs('option', 'selected');

Sekmenin dizinini almak yerine, size sekmenin gerçek kimliğini vermesi anlamında daha iyidir.

bunu yapmanın en kolay yolu

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

ve indeks için

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

Etkin sekme Dizini'ni bulursanız ve ardından Etkin Sekme'yi işaret ederseniz

Önce Aktif dizini alın

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

Ardından css sınıfını kullanarak sekme içerik panelini alın

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

şimdi onu daha fazla kullanmak için jQuery nesnesine sarıldı

 var tabContent$ = $(element);

burada sınıfın .ui-tabs-navNavigasyon için .ui-tabs-panelolduğu ve sekme içerik paneli ile ilişkilendirildiği iki bilgi eklemek istiyorum . jquery ui web sitesindeki bu bağlantı demosunda bu sınıfın kullanıldığını göreceksiniz - http://jqueryui.com/tabs/#manipulation

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

0'dan sekme dizinine sahip olacaksınız

basit

Takip etmeyi dene:

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

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

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

Aşağıdaki kodun hile yaptığını buldum. Yeni seçilen sekme dizininin bir değişkenini ayarlar

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

Aşağıdaki cevabı bir sonraki yazınıza gönderebilirsiniz

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

Seçili sekme dizinini almanın başka bir yolu şudur:

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

Gelen url değişkeni geçerli sekmenin HREF / URL'sini alacak

Bunu şu adresten bulabilirsiniz:

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

gibi gizli bir değişkeni alın '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'ve her sekmenin onclick olayına şu şekilde kod yazın ...

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

yayınlanan sayfada 'sel_tab' değerini alabilirsiniz. :), basit !!!

ui.newTab.index()Tüm durumlarda (yerel ve uzak sekmeler) kullanılabilir olduğundan emin olmak istiyorsanız , dokümantasyonda belirtildiği gibi etkinleştirme işlevinde arayın :

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