Onglets jQuery UI - Comment obtenir l'index de l'onglet actuellement sélectionné ?

Question

Je sais que cette question spécifique a été demandé avant mais je n'obtiens aucun résultat en utilisant l'option bind() sur l'événement jQuery UI Tabs plugin.

J'ai juste besoin du index de l'onglet nouvellement sélectionné pour effectuer une action lorsque l'on clique sur l'onglet. bind() me permet d'accéder à l'événement select, mais ma méthode habituelle pour obtenir l'onglet actuellement sélectionné ne fonctionne pas. Elle renvoie l'index de l'onglet précédemment sélectionné, et non le nouvel onglet :

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

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

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

});

Quand j'utilise ce code, l'objet ui revient undefined . D'après la documentation, il s'agit de l'objet que je dois utiliser pour accéder à l'index nouvellement sélectionné en utilisant ui.tab. J'ai essayé de le faire sur la page initiale tabs() l'appel et aussi par lui-même. Est-ce que je fais quelque chose de mal ici ?

Answer 1

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

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

Mise à jour : A partir de la version 1.9, "selected" est remplacé par "active".

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

Answer 2

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

Pour JQuery UI 1.9 ou supérieur : voir le réponse par Giorgio Luparia, ci-dessous.

Answer 3

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

Pour les versions antérieures, utilisez ui.index .

Answer 4

UPDATE [ _{Dimanche 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 le dernier cri en matière d'information facile d'accès pour travailler avec onglets dans jQueryUI
Vous trouverez également (dans le blog également) une jsFiddle

---

¡¡¡ Mise à jour ! Veuillez noter : 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 Une chose que je n'ai pas vue mentionnée est comment obtenir l'"onglet sélectionné" (panneau déroulant actuel) à partir d'un autre endroit que 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 puis .find('.ui-tabs-panel:not(.ui-tabs-hide)'), vous trouverez qu'il est facile de faire cela pour les onglets sélectionnés dans les cadres également. N'oubliez pas que jQuery a déjà fait tout le travail, pas besoin de réinventer la roue !

Juste pour développer (mis à jour)

On m'a posé la question suivante : "Que se passe-t-il s'il y a plus d'une zone d'onglets dans la vue ?". Encore une fois, pensez simplement, utilisez ma même configuration mais utilisez un ID pour identifier les onglets que vous voulez atteindre.

Par exemple, si vous avez :

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

Et vous voulez que le panneau actuel du deuxième onglet soit défini :

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

Et si vous voulez l'onglet RÉEL et non le panneau (vraiment facile, c'est pourquoi je ne l'ai pas mentionné avant mais je suppose que je vais le faire 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, n'oubliez pas que c'est jQuery qui a fait tout le travail, ne pensez pas trop fort.

Answer 5

Quand essayez-vous d'accéder à l'objet ui ? L'objet ui sera indéfini si vous essayez d'y accéder en dehors de l'événement bind. De même, 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à (l'onglet "précédent"), car l'événement "tabsselect" est appelé avant que l'onglet cliqué ne devienne l'onglet actuel. Si vous souhaitez toujours procéder de cette manière, l'utilisation de "tabsshow" à la place aura pour résultat que selectedTab sera égal à l'onglet cliqué.

Cependant, cela semble trop complexe si tout ce que vous voulez est l'index. ui.index à l'intérieur de l'événement ou $("#TabList").tabs().data("selected.tabs") à l'extérieur de l'événement devraient suffire.