web-dev-qa-db-fra.com

onglets de l'interface utilisateur jQuery - Comment obtenir l'index d'onglets sélectionné

Je sais que cette question spécifique a été posée auparavant , mais je ne reçois aucun résultat à l'aide de l'événement bind() du plugin jQuery UI Tabs. 

J'ai juste besoin de la index de l'onglet nouvellement sélectionné pour effectuer une action lorsque l'on clique sur l'onglet. bind() me permet de participer à l'événement select, mais ma méthode habituelle d'obtention de l'onglet actuellement sélectionné ne fonctionne pas. Il retourne l'index de tabulation précédemment sélectionné, pas le nouveau:

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

Voici le code que je tente d'utiliser pour obtenir l'onglet sélectionné:

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

});

Quand j'utilise ce code, l'objet ui revient undefined. Dans la documentation, il s’agit probablement de l’objet que j’utilise pour accrocher le nouvel index sélectionné à l’aide de ui.tab. J'ai essayé ceci lors de l'appel initial tabs() et également seul. Est-ce que je fais quelque chose de mal ici?

javascriptjqueryjquery-uitabsjquery-ui-tabs
108
Mark Struzinski

Pour les versions de JQuery UI antérieures à 1.9: ui.index à partir de event est ce que vous voulez.

Pour JQuery UI 1.9 ou version ultérieure: voir le answer de Giorgio Luparia, ci-dessous.

69
redsquare

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

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

Mise à jour: À partir de la version 1.9, «sélectionné» devient «actif».

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

METTRE À JOUR [Dim 26/08/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 permettant de travailler avec onglets dans jQueryUI. 
Est également inclus (dans le blog également) un jsFiddle

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

Je sais que ce fil est vieux, mais quelque chose que je n'ai pas vu mentionné, c'est comment obtenir "l'onglet sélectionné" (panneau actuellement déroulé) ailleurs que dans les "événements d'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 cela facile à faire pour les onglets sélectionnés dans les cadres également . , jQuery a déjà fait tout le travail, pas besoin de réinventer la roue!

Juste pour développer (mise à jour)

La question m’a été posée: «Que se passe-t-il s’il ya plus d’une zone d’onglets dans la vue?» Encore une fois, réfléchissons simplement, utilisez la même configuration, mais utilisez un ID pour identifier les onglets que vous souhaitez obtenir. 

Par exemple, si vous avez:

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

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

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

Et si vous voulez l’onglet ACTUAL et pas le panneau (très facile, c’est pourquoi je n’en ai pas parlé auparavant, mais je suppose que je le ferai maintenant, pour être précis).

// 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 pensez pas si fort.

43
SpYk3HH

Si vous utilisez la version 1.9.0 ou supérieure de JQuery UI, 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 .

38
Giorgio Luparia

Quand essayez-vous d'accéder à l'objet d'interface utilisateur? ui sera indéfini si vous essayez d'y accéder en dehors de l'événement bind . En outre, si cette ligne

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

est exécuté dans l'événement comme ceci:

$("#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 sur lequel vous avez cliqué ne devienne l'onglet actuel. Si vous voulez toujours le faire de cette façon, utiliser "tabsshow" à la place donnera à selectedTab égal à l'onglet sur lequel vous avez cliqué.

Cependant, cela semble trop complexe si tout ce que vous voulez, c'est l'index. ui.index depuis l'événement ou $ ("# TabList"). tabs (). data ("selected.tabs") en dehors de l'événement devrait suffire.

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

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

5
user1714346

Si vous trouvez Index actif, puis pointez sur Onglet actif 

D'abord obtenir l'index actif 

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

Puis, en utilisant la classe css, obtenez le panneau de contenu des onglets.

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

maintenant enveloppé dans l'objet jQuery pour continuer à l'utiliser

 var tabContent$ = $(element);

ici, je veux ajouter deux informations: la classe .ui-tabs-nav est pour Navigation associée à et .ui-tabs-panel est associé au panneau de contenu des onglets. dans ce lien démonstration sur le site Web de jquery ui, vous verrez que cette classe est utilisée - http://jqueryui.com/tabs/#manipulation

4
dekdev

Si quelqu'un a essayé d'accéder aux onglets depuis une iframe, vous remarquerez peut-être que ce n'est pas possible. La div de l'onglet n'est jamais marquée comme sélectionnée, tout comme masquée ou non masquée. Le lien lui-même est la seule pièce marquée comme sélectionnée.

<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 valeur href du lien qui devrait être identique à 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 dans le sens où au lieu d’obtenir l’index de l’onglet, il vous donne l’identifiant de l’onglet.

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

alors vous aurez l'index de l'onglet de 0

simple

3
Qin Wang

le moyen le plus simple de le faire est 

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

et pour index

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

J'ai trouvé le code ci-dessous qui fait l'affaire. Définit une variable du nouvel index de tabulation sélectionné 

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

Essayez ce qui suit:

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

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

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

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

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

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

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

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

1
Chandre Gowda

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

<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. :), simple !!!

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

Si vous voulez vous assurer que ui.newTab.index() est disponible dans toutes les situations (onglets locaux et distants), appelez-le dans la fonction activate en tant que documentation dit:

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