Onglets de l'interface utilisateur jQuery - Comment obtenir l'index des onglets actuellement sélectionnés

Je sais que cette question spécifique a déjà été posée , mais je n'obtiens aucun résultat en utilisant l' bind()événement sur le jQuery UI Tabsplugin.

J'ai juste besoin indexde l'onglet nouvellement sélectionné pour effectuer une action lorsque l'utilisateur clique sur l'onglet. bind()me permet de m'accrocher à l'événement select, mais ma méthode habituelle pour obtenir l'onglet actuellement sélectionné ne fonctionne pas. Il renvoie l'index de l'onglet précédemment sélectionné, pas le nouveau:

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

Voici le code que j'essaie d'utiliser pour obtenir l'onglet actuellement sélectionné:

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

});

Lorsque j'utilise ce code, l'objet ui revientundefined . D'après la documentation, cela devrait être l'objet que j'utilise pour m'accrocher à l'index nouvellement sélectionné en utilisant ui.tab. J'ai essayé cela lors de l' tabs()appel initial et aussi seul. Est-ce que je fais quelque chose de mal ici?

Pour les versions de JQuery UI antérieures à la 1.9 : à ui.indexpartir de eventest ce que vous voulez.

Pour JQuery UI 1.9 ou version ultérieure : voir la réponse de Giorgio Luparia ci-dessous.

Si vous avez besoin d'obtenir l'index des onglets en dehors du contexte d'un événement tabs, utilisez ceci:

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

Mise à jour: à partir de la version 1.9, «sélectionné» est remplacé par «actif»

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

MISE À JOUR [ _{Sun 08/26/2012} ] Cette réponse est devenue si populaire que j'ai décidé d'en faire un blog / tutoriel à part entière.
Veuillez visiter Mon blog ici pour voir les dernières informations d'accès facile pour travailler avec les onglets dans jQueryUI
Également inclus (dans le blog aussi) est un jsFiddle

Mettre à jour! Remarque: dans les versions plus récentes de jQueryUI (1.9+), ui-tabs-selecteda été remplacé par ui-tabs-active. !!!

Je sais que ce fil est vieux, mais quelque chose que je n'ai pas vu mentionné était de savoir comment obtenir "l'onglet sélectionné" (panneau actuellement déroulé) à partir d'un autre endroit que les "événements de l'onglet". J'ai un moyen simple ...

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

Et pour obtenir facilement l'index, il y a bien sûr le chemin indiqué sur le site ...

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

Cependant, vous pouvez utiliser ma première méthode pour obtenir l'index et tout ce que vous voulez sur ce panneau assez facilement ...

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

PS. Si vous utilisez une variable iframe alors .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), vous trouverez également facile de le faire pour les onglets sélectionnés dans les cadres. Rappelez-vous que jQuery a déjà fait tout le travail, pas besoin de réinventer la roue!

Juste pour développer (mis à jour)

La question m'a été posée: "Que faire s'il y a plusieurs zones d'onglets sur la vue?" Encore une fois, pensez simple, utilisez ma même configuration, mais utilisez un identifiant pour identifier les onglets que vous souhaitez consulter.

Par exemple, si vous avez:

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

Et vous voulez le panneau actuel du deuxième ensemble d'onglets:

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

Et si vous voulez l'onglet ACTUAL et non le panneau (vraiment facile, c'est pourquoi je ne l'ai pas mentionné avant mais je suppose que je le ferai maintenant, juste pour être minutieux)

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

Encore une fois, rappelez-vous, jQuery a fait tout le travail difficile, ne réfléchissez pas si dur.

Si vous utilisez JQuery UI version 1.9.0 ou supérieure, vous pouvez accéder à ui.newTab.index () dans votre fonction et obtenir ce dont vous avez besoin.

Pour les versions antérieures, utilisez 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');

Quand essayez-vous d'accéder à l'objet ui? ui ne sera pas défini si vous essayez d'y accéder en dehors de l'événement de liaison. Aussi, si cette ligne

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

est exécuté dans l'événement comme celui-ci:

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

selectedTab sera égal à l'onglet actuel à ce moment-là (le "précédent".) Cela est dû au fait que l'événement "tabsselect" est appelé avant que l'onglet cliqué ne devienne l'onglet actuel. Si vous voulez toujours le faire de cette façon, utiliser à la place "tabsshow" entraînera selectedTab égal à l'onglet cliqué.

Cependant, cela semble trop complexe si vous ne voulez que l'index. ui.index depuis l'événement ou $ ("# TabList"). tabs (). data ("selected.tabs") en dehors de l'événement devrait être tout ce dont vous avez besoin.

cela a changé avec la version 1.9

quelque chose comme

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


        });

Devrait être utilisé. Cela fonctionne bien pour moi ;-)

Si quelqu'un a essayé d'accéder aux onglets à partir d'une iframe, vous remarquerez peut-être que ce n'est pas possible. Le divde l'onglet n'est jamais marqué comme sélectionné, juste comme caché ou non caché. Le lien lui-même est le seul élément marqué comme sélectionné.

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

Ce qui suit vous donnera la hrefvaleur du lien qui devrait être la même que l'ID de votre conteneur d'onglets:

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

Cela devrait également fonctionner à la place de: $tabs.tabs('option', 'selected');

C'est mieux en ce sens qu'au lieu d'obtenir simplement l'index de l'onglet, cela vous donne l'identifiant réel de l'onglet.

le moyen le plus simple de procéder est

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

et pour index

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

Dans le cas où vous trouvez l'index de l'onglet actif, puis pointez sur l'onglet actif

Obtenez d'abord l'index actif

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

Ensuite, à l'aide de la classe css, obtenez le panneau de contenu de l'onglet

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

maintenant enveloppé dans un objet jQuery pour l'utiliser davantage

 var tabContent$ = $(element);

ici, je veux ajouter deux informations auxquelles la classe .ui-tabs-navest pour la navigation associée et .ui-tabs-panelest associée au panneau de contenu de l'onglet. dans cette démo de lien dans le site Web de jquery ui, vous verrez que cette classe est utilisée - http://jqueryui.com/tabs/#manipulation

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

alors vous aurez l'index de tab de 0

Facile

Essayez ce qui suit:

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

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

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

J'ai trouvé que le code ci-dessous faisait l'affaire. Définit une variable de l'index de l'onglet nouvellement sélectionné

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

Vous pouvez poster la réponse ci-dessous dans votre prochain post

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

Une autre façon d'obtenir l'index de l'onglet sélectionné est:

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

Dans la variable url , vous obtiendrez le HREF / URL de l'onglet actuel

Vous pouvez le trouver via:

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

prenez une variable cachée comme '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'et sur l'événement onclick de chaque onglet, écrivez du code comme ...

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

vous pouvez obtenir la valeur de 'sel_tab' sur la page publiée. :) , Facile !!!

Si vous voulez vous assurer qu'il ui.newTab.index()est disponible dans toutes les situations (onglets locaux et distants), appelez-le dans la fonction d' activation comme le dit la documentation :

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