it-swarm.com.ru

вкладки пользовательского интерфейса jQuery - Как получить индекс выбранной вкладки

Я знаю, что этот конкретный вопрос был задан ранее , но я не получаю никаких результатов, используя событие bind() в плагине jQuery UI Tabs

Мне просто нужно index недавно выбранной вкладки, чтобы выполнить действие при нажатии на вкладку. bind() позволяет мне подключиться к событию select, но мой обычный метод получения текущей выбранной вкладки не работает. Возвращает ранее выбранный индекс вкладки, а не новый:

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

Вот код, который я пытаюсь использовать, чтобы получить выбранную на данный момент вкладку:

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

});

Когда я использую этот код, объект пользовательского интерфейса возвращается undefined. Из документации это должен быть объект, который я использую для подключения к новому выбранному индексу с помощью ui.tab. Я попробовал это на первом вызове tabs(), а также сам по себе. Я что-то здесь не так делаю?

108
Mark Struzinski

Для версий пользовательского интерфейса JQuery до 1.9: ui.index из event - это то, что вам нужно.

Для JQuery UI 1.9 или более поздней версии: см. ответ Джорджо Лупарии ниже.

69
redsquare

Если вам нужно получить индекс вкладки вне контекста события вкладок, используйте это:

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

Обновление: С версии 1.9 «выбранный» изменен на «активный»

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

ОБНОВЛЕНИЕ [Вс 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-hide)'), вы также легко сможете сделать это для выбранных вкладок в фреймах . Помните 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 сделал всю тяжелую работу, не думайте так усердно.

43
SpYk3HH

Если вы используете JQuery UI версии 1.9.0 или выше, вы можете получить доступ к ui.newTab.index () внутри своей функции и получить то, что вам нужно.

Для более ранних версий используйте ui.index .

38
Giorgio Luparia

Когда вы пытаетесь получить доступ к объекту пользовательского интерфейса? пользовательский интерфейс будет неопределенным, если вы попытаетесь получить к нему доступ вне события bind . Также, если эта строка

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 (). data ("selected.tabs") вне события должно быть всем, что вам нужно.

11
Ben Koehler
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');
10
MeneerBij

это изменилось с версией 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());
            }


        });

должен быть использован. Это работает нормально для меня ;-)

5
user1714346

В случае, если вы найдете активную вкладку Индекс, а затем указать на активную вкладку 

Сначала получите Активный индекс 

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

4
dekdev

Если кто-то попытался получить доступ к вкладкам из 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');

Это лучше в том смысле, что вместо того, чтобы просто получить индекс вкладки, он дает вам фактический идентификатор вкладки.

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

тогда у вас будет индекс табуляции от 0

просто

3
Qin Wang

самый простой способ сделать это 

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

и для индекса

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

Я нашел код ниже делает свое дело. Устанавливает переменную индекса новой выбранной вкладки 

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

Попробуйте следующее:

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

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

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

Вы можете оставить ответ ниже в своем следующем посте

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

Другой способ получить индекс выбранной вкладки:

var index = jQuery('#tabs').data('tabs').options.selected;
1
chrism
$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

В переменной url вы получите HREF/URL текущей вкладки

1
Chandre Gowda

возьмите скрытую переменную, такую ​​как '<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 на размещенной странице. :) , просто !!!

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

Если вы хотите убедиться, что ui.newTab.index() доступен во всех ситуациях (локальные и удаленные вкладки), то вызовите его в функции activ как документация говорит:

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