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


112

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

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

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

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

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

});

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

Ответы:


71

Для версий JQuery UI до 1.9 : ui.indexот того event, что вы хотите.

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


Очень хороший ответ! Я включил краткое изложение того, что вы сделали, на веб-сайт, чтобы было легче получить ответ.
torial

Ура, Q упомянул, что объект ui был нулевым, поэтому ui.index в настоящее время не работает. Я думаю, что ответ, возможно, не так прост, как включить это.
redsquare

Это был прекрасный ответ, спасибо за отличный пример! Я пытался сделать все за один снимок, но не получалось. После того, как я его разделил, все заработало, как было заявлено.
Марк Струзински

4
Ответ есть - используйте свойство ui.index, чтобы получить текущий индекс в событии tabselect .....
redsquare

17
Ответ следует обновить, потому что он не работает с JQuery UI 1.9.0. Вы должны изменить ui.index с помощью ui.newTab.index () в соответствии с Руководством по обновлению ( jqueryui.com/upgrade-guide/1.9/… )
Джорджио Лупария

201

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

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

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

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

2
Во всяком случае, это оказалось то, что мне нужно.
Эль Йобо

2
Похоже, это фактически дает вкладку по умолчанию, а не текущую выбранную вкладку. Что мне не хватает? 42 голоса не могут ошибаться, не так ли? jqueryui.com/demos/tabs/#option-selected
Патрик Салапски,

Да, это решение помогло. Спасибо @Contra
Ashwin

9
Параметр «selected» был переименован в «active» в jQuery UI версии 1.9 (см. Jqueryui.com/changelog/1.9.0 )
jake

43

UPDATE [ ВС 08/26/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 проделал всю тяжелую работу, не думайте так усердно.


Отлично, спасибо! Если хотите, можете предоставить это как ответ на stackoverflow.com/q/1864219/11992 .
nikow

Это именно то, что мне было нужно - спасибо!
Джастин Этье,

5
Параметр «selected» был переименован в «активный» в jQuery UI версии 1.9 (см. Jqueryui.com/changelog/1.9.0).
Джейк

41

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

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


6
Было бы здорово, если бы вы могли дополнить свой ответ некоторыми дополнительными деталями.
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');

11

Когда вы пытаетесь получить доступ к объекту пользовательского интерфейса? 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 (). data ("selected.tabs") вне события должно быть всем, что вам нужно.


@Ben: ваше решение дает предыдущую выбранную вкладку, поскольку это был индекс, когда было запущено событие tabsselect.
Майкл Мао,

1
@Michael: Вы прочитали мой ответ или просто взяли код? В своем ответе я заявляю, что код не будет работать как есть, и предлагаю несколько альтернатив (событие 'tabshow'; ui.index; $ ('TabList'). Tabs (). Data ('selected.tabs'))
Бен Koehler

: Извините за мой поздний ответ. Да, ui.index работает нормально. Я просто хотел указать на тот факт, что selected.tabs показывает «предыдущую» выбранную вкладку, а не лечебную. Я не хочу обидеть твой ответ.
Майкл Мао,

5

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


        });

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


4

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

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

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

и для индекса

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

4

В случае, если вы найдете Active tab Index, а затем укажете на Active Tab

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

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



2

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

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

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

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

2

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

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

2

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

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

Этот ответ полезен для поиска текущей активной вкладки, особенно когда не в контексте события выбора вкладки.
hrabinowitz

1

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

var index = jQuery('#tabs').data('tabs').options.selected;

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

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



0

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


2
Я не голосовал против, но нет причин для дополнительной разметки и встроенного JavaScript. Тем более, что он уже использует jQuery ...
Джастин Этье

0

Если вы хотите убедиться, что 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/


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

1
Добро пожаловать в Stack Overflow! Хотя ссылки являются отличным способом обмена знаниями, они не ответят на вопрос, если в будущем они сломаются. Добавьте к своему ответу основное содержание ссылки, которая отвечает на вопрос. Если содержание слишком сложное или слишком большое, чтобы здесь поместиться, опишите общую идею предлагаемого решения. Не забывайте всегда сохранять ссылку на веб-сайт исходного решения. См .: Как мне написать хороший ответ?
sɐunıɔ ןɐ qɐp
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.