Вкладки користувальницького інтерфейсу jQuery - Як отримати в даний час вибраний індекс вкладок

Я знаю, що це питання було задано раніше , але я не отримую жодних результатів, використовуючи bind()подію на jQuery UI Tabsплагіні.

Мені просто потрібна indexщойно вибрана вкладка, щоб виконати дію, коли клацніть на вкладці. bind()дозволяє мені підключитися до вибраної події, але мій звичайний метод отримання вибраної вкладки не працює. Він повертає раніше вибраний індекс вкладки, а не новий:

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

Ось код, який я намагаюся використовувати, щоб отримати в даний час вибрану вкладку:

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

});

Коли я використовую цей код, об’єкт ui повертаєтьсяundefined . З документації це повинен бути об'єкт, який я використовую для підключення до щойно вибраного індексу за допомогою ui.tab. Я спробував це під час початкового tabs()дзвінка, а також самостійно. Чи я тут щось неправильно роблю?

Для версій інтерфейсу JQuery UI до 1.9 : ui.indexз того event, що ви хочете.

Для JQuery UI 1.9 або новішої версії : див. Відповідь Джорджіо Лупарія нижче.

Якщо вам потрібно отримати індекс вкладки за межами контексту події вкладок, скористайтеся цим:

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

Оновлення: З версії 1.9 "вибрано" змінюється на "активне"

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

ОНОВЛЕННЯ [ _{Нд 26.08.2012} ] Ця відповідь стала настільки популярною, що я вирішив перетворити її на повноцінний блог / підручник.
Будь ласка, відвідайте Мій блог тут, щоб побачити останню інформацію про простий доступ до роботи з вкладками в jQueryUI
Також включена (у блозі теж) - jsFiddle

¡¡¡Оновлення! Зверніть увагу: у нових версіях jQueryUI (1.9+) ui-tabs-selectedбуло замінено на ui-tabs-active. !!!

Я знаю, що цей потік старий, але щось, про що я не бачив, було те, як отримати "обрану вкладку" (наразі випала панель) з іншого місця, ніж "події вкладки". У мене просто спосіб ...

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

І щоб легко отримати індекс, звичайно, є спосіб, зазначений на сайті ...

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

Однак ви можете скористатися моїм першим методом, щоб отримати індекс і все, що завгодно про цю панель, досить легко ...

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

PS. Якщо ви використовуєте змінну iframe, то .find ('. Ui-tabs-panel: not (.ui-tabs-hid)'), вам буде легко це зробити і для вибраних вкладок у кадрах. Пам'ятайте, jQuery вже зробив всю важку роботу, не потрібно винаходити колесо!

Просто для розширення (оновлення)

До мене було поставлено запитання: "Що робити, якщо на перегляді є кілька областей вкладок?" Знову ж таки, подумайте просто, використовуйте мою налаштування, але використовуйте ідентифікатор, щоб визначити, які вкладки ви хочете отримати.

Наприклад, якщо у вас є:

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

І ви хочете, щоб поточна панель другого набору вкладок:

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

І якщо ви хочете вкладку «АКТУАЛЬНІ», а не панель (дуже просто, саме тому я не згадую про це раніше, але, мабуть, зараз буду, тільки щоб бути ретельним)

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

Знову ж, пам’ятайте, jQuery зробив всю важку роботу, не думайте так важко.

Якщо ви використовуєте інтерфейс JQuery UI версії 1.9.0 або вище, ви можете отримати доступ до ui.newTab.index () у межах своєї функції та отримати все необхідне.

Для більш ранніх версій використовуйте 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? ui буде невизначено, якщо ви спробуєте отримати доступ до нього поза події прив'язки. Також, якщо цей рядок

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

проводиться у такому випадку:

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

selectedTab буде дорівнювати поточній вкладці в цей момент часу ("попередня"). Це відбувається тому, що подія "tabsselect" викликається до того, як натиснута вкладка стане поточною вкладкою. Якщо ви все ще хочете зробити це таким чином, використання "tabsshow" натомість призведе до того, що selectedTab дорівнює вкладеній вкладці.

Однак це здається надскладним, якщо все, що вам потрібно, - це індекс. ui.index з події або $ ("# TabList"). tabs (). Дані ("selected.tabs") поза подіями повинні бути все, що вам потрібно.

це змінилося у версії 1.9

щось на зразок

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


        });

слід використовувати. Це добре працює для мене ;-)

Якщо хтось спробував отримати доступ до вкладок із рамки iframe, ви можете помітити, що це неможливо. divВиберіть будь-коли буде позначений як обраний, так само , як приховані або не приховані. Саме посилання є єдиним фрагментом, позначеним як обраний.

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

Далі ви отримаєте hrefзначення посилання, яке має бути таким же, як ідентифікатор для контейнера вкладки:

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

Це також має працювати замість: $tabs.tabs('option', 'selected');

Краще в тому сенсі, що замість того, щоб просто отримати індекс вкладки, він дає вам фактичний ідентифікатор вкладки.

найпростіший спосіб зробити це

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

і для індексу

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

Якщо ви знайдете Активний вкладку "Індекс", а потім наведіть на вкладку "Активна"

Спочатку отримайте індекс Active

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

Потім за допомогою класу css отримайте панель вмісту вкладок

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

тепер загорнув його в об’єкт jQuery для подальшого використання

 var tabContent$ = $(element);

тут я хочу додати дві відомості, для яких клас .ui-tabs-navпризначений для навігації та .ui-tabs-panelпов'язаний з вмістом панелі вкладок. у цьому демо-посилання на веб-сайті jquery ui ви побачите, що цей клас використовується - http://jqueryui.com/tabs/#manipulation

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

тоді у вас буде індекс вкладки від 0

просто

Спробуйте наступне:

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

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

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

Я знайшов код нижче робить трюк. Встановлює змінну щойно вибраного індексу вкладки

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

Відповідь ви можете опублікувати нижче в наступному дописі

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

Ще один спосіб отримати вибраний індекс вкладки:

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

У змінній URL ви отримаєте HREF / URL поточної вкладки

Ви можете знайти його за допомогою:

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

візьміть приховану змінну, наприклад, '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'і на кожній вкладці події onclick записуйте код, як ...

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

ви можете отримати значення "sel_tab" на опублікованій сторінці. :), просто !!!

Якщо ви хочете переконатися, що ui.newTab.index()він доступний у будь-яких ситуаціях (локальні та віддалені вкладки), тоді зателефонуйте у функцію активації, як зазначено в документації :

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