it-swarm.com.ru

получить текущую вкладку во вкладках пользовательского интерфейса jQuery

Я использую вкладки jQuery UI внутри диалогового окна jQuery UI.

Я натолкнулся на случай, когда мне нужно найти идентификатор текущей вкладки при нажатии на одну из кнопок диалога. Глядя на HTML-код, сгенерированный вкладками и диалогами jQuery UI, я не могу найти способ сделать это. Элементы <ul>, которые содержат вкладку, находятся на расстоянии 3 <div> от группы кнопок диалога. 

Я старался:

$("#DialogBox").dialog({
    autoOpen: false,
    modal: true,
    buttons: [
        {
        text: "Save",
        click: function () {
        var currentTabId = $(this).closest("ul").attr("id");
        alert(currentTabId);

Но я только что получил «неопределенное» предупреждение.

Есть ли способ сделать это?

Спасибо

13
SkyeBoniwell

Согласно инструкции http://api.jqueryui.com/tabs/ получатель активной вкладки JqueryUI 

var active = $( ".selector" ).tabs( "option", "active" );

* Замените ".selector" своим. 

Тогда active.attr( 'id' ) вернет именно то, что вам нужно.

2
zeliboba

Это то, что у меня сработало (jQuery 1.9, jQueryUI 1.10). Я не проверял это для более ранних версий jQueryUI, но если у вас есть jQueryUI 1.8 или более ранняя версия, вместо 'active' попробуйте использовать 'select'.

// GET INDEX OF ACTIVE TAB
// make sure to replace #tabs with the actual selector
// that you used to create the tabs
var activeTabIdx = $('#tabs').tabs('option','active');

// ID OF ACTIVE TAB
// make sure to change #tabs to your selector for tabs
var selector = '#tabs > ul > li';
var activeTabID = $(selector).eq(activeTabIdx).attr('id');

// ID OF ACTIVE TAB CONTENT
// make sure to change #tabs to your selector for tabs
var selector = '#tabs [id=ui-tabs-' + (activeTabIdx + 1) + ']';
var activeTabContentID = $(selector).attr('id');
16
Michael

Используйте следующее в случае jQuery 1.9+,

var currentTabId = $('div[id="mytabs"] ul .ui-tabs-active').attr("id");
13
Santosh

Для JQuery UI 1.11+ это сработало для меня:

$("ul>.ui-tabs-active").attr('aria-controls');
8
maja

⚡ работал для меня таким образом ⚡

var currentTab=$("ul> .ui-tabs-active").attr('aria-controls');
console.log(currentTab);
3
Rizerzero

// для получения выбранных вкладок

var tabs = $ (" #tabs "). children (). find (" .current "). attr ( 'href' );

2
saqib javaid

вот правильный и самый простой:

var active = $(".tab-pane.active").attr("id");
console.log(active);

Вы должны добавить активный селектор рядом с панелью вкладок. Это вернет текущий идентификатор активной вкладки.

1
Marlon Ingal

Предположим, что идентификатором контейнера вкладок пользовательского интерфейса является tab-container. Рабочий фрагмент

$('#tab-container').find('>div:nth-of-type(' + ($('#tab-container').tabs("option", "active") + 1) + ')'); 

Протестировано с пользовательским интерфейсом jQuery v1.11.2, jQuery v1.11.3 и Chrome 45. 

1
userlond

Что сработало для меня:

var current_tab = $("#tabs .ui-state-active a").attr('href');
1
trojan

Это также работает, используя JQuery 3.1.1 и Jquery UI 1.12.1, когда вам нужно выбрать активную вкладку в javascript (под «select» я подразумеваю в селекторе JQuery, а не «select» в смысле сделать вкладку активной т.к. конечно вкладка уже активна).

Чтобы получить ссылку на текущую выбранную вкладку, сначала получите ссылку на активную ссылку (подставьте идентификатор контейнера ваших вкладок «myTabs»):

var $link = $('div[id=myTabs] ul .ui-tabs-active');

$ link имеет идентификатор вкладки в атрибуте «aria-controls»:

var $tab = $('#' + $link.attr('aria-controls'));

$ tab - это ссылка на тело вкладки. Например, вы можете позвонить 

$tab.html('[html here]') 

заполнить или заменить содержимое вкладки.

0
Tom Regan

(Этот ответ актуален для JQuery UI 1.12 и, возможно, несколькими версиями ранее.)

Это зависит от того, что вы подразумеваете под вкладкой ... Есть вещь, которую вы нажимаете, чтобы выбрать вкладку и панель, которая отображается из-за щелчка. Вы нажимаете на элемент списка <li>, который содержит якорный тег <a> с атрибутом href, который указывает на идентификатор панели (перед ним стоит «#»). Значения id панели и href устанавливаются вами (не JQuery). Элемент списка по умолчанию не имеет идентификатора, но элемент привязки имеет ... он генерируется JQuery и будет выглядеть как 'ui-id-88'. Чтобы получить идентификатор вкладки, привязки или идентификатора панели, вы можете использовать следующее:

// if you have nested tabs this might not work... in such case, give 
// your parent tab and panel a unique class and use it in selector
var $tabs = $("#tabs");
var tabIndex = $tabs.tabs("option", "active");
var $tab = $tabs.find("li[role=tab]").eq(tabIndex);
var tabId = $tab.attr("id"); // undefined unless set by user
var anchorId = $tab.attr("aria-labelledby"); // or $tabs.find("ul li a.ui-tabs-anchor").eq(tabIndex).attr("id");
var panelId = $tab.attr("aria-controls"); //or $tabs.find(".ui-tabs-panel").eq(tabIndex).attr("id");
// note: panelId will also be in href of anchor with prepended # sign
alert("tabId=" + tabId + ", anchorId=" + anchorId + ", panelId=" + panelId);
0
splashout