Onglets de l'interface utilisateur jQuery. Comment sélectionner un onglet basé sur son identifiant non basé sur un index
J'ai deux onglets et configuré usign jQuery UI.
ul class="tabs"
li tabone
li tabtwo
ul
dynamiquement à partir du code C # derrière, je vais masquer ou sélectionner un onglet; disons que tabtwo et l’autre onglet doivent être masqués ou non affichés. Je peux le faire en JavaScript en utilisant .tabs({selected:1}); et .tabs(disable:0). mais je ne souhaite pas utiliser les index de tabulation pour le faire.
Existe-t-il une autre solution pour sélectionner les onglets en fonction de leur nom/identifiant?
Remarque: en raison de modifications apportées à jQuery 1.9 et à jQuery UI, cette réponse n'est plus la bonne. Veuillez voir la réponse de @ stankovski ci-dessous.
Vous devez d'abord trouver l'index de l'onglet (qui est juste sa position dans une liste), puis sélectionner spécifiquement l'onglet à l'aide de l'événement de sélection fourni par jQuery UI ( tabs-> select ).
var index = $('#tabs ul').index($('#tabId'));
$('#tabs ul').tabs('select', index);
Mise à jour: BTW - Je me rends bien compte que ceci est (finalement) toujours en sélectionnant par index. Toutefois, il n'est pas nécessaire que vous connaissiez la position spécifique des onglets (en particulier lorsqu'ils sont générés dynamiquement comme demandé dans la question).
La réponse acceptée n'a pas fonctionné pour moi non plus, mais j'ai trouvé une solution dans un fil similaire: Basculer vers l'onglet sélectionné par son nom dans Jquery-UI Tabs
var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);
Avec jQuery UI> = 1.9:
var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
Dans le document le plus récent, la méthode select prend un index ou l'id du panneau de l'onglet (la valeur de hachage href). La documentation indique:
Sélectionnez un onglet, comme s'il était cliqué. Le deuxième argument est l'index de base zéro de l'onglet à sélectionner ou le sélecteur d'identifiant du panneau auquel l'onglet est associé (l'identificateur de fragment href de l'onglet, par exemple, un hachage, pointe vers l'identifiant du panneau).
Donc, étant donné une mise en page comme
<div id="myTabs">
<ul class="tabs">
<li><a href="#tabone">tabone</a></li>
<li><a href="#tabtwo">tabtwo</a></li>
</ul>
</div>
les oeuvres suivantes
$('#myTabs').tabs('select', '#tabtwo');
Voici un exemple .
[~ # ~] met à jour [~ # ~]
La solution ci-dessus fonctionne dans les versions de jQuery UI inférieures à 1.9. Pour une solution dans les versions 1.9+, voir @ stankovski answer .
Actif 1er onglet
$("#workflowTab").tabs({ active: 0 });
Dernier onglet actif
$("#workflowTab").tabs({ active: -1 });
2ème onglet actif
$("#workflowTab").tabs({ active: 1 });
Son travail comme un tableau
Cela peut avoir des effets secondaires s'il y a d'autres écouteurs, et cela ne semble pas aussi agréable que d'interagir via l'API des plugins - mais cela donne un code moins détaillé si vous cliquez simplement sur l'onglet, plutôt que de compter son index et de le définir. il est actif par la suite, et ce qui se passe est assez intuitif. En outre, cela n'échouera pas si les utilisateurs de l'interface utilisateur décident de renommer l'option.
$('#tabs').tabs();
$('#tabs a[href="#tabtwo"]').click();
Il est intéressant, cependant, que le code des onglets de l'interface utilisateur ait une méta-fonction (_getIndex) avec le commentaire:
"méta-fonction pour donner aux utilisateurs l'option de fournir une chaîne href au lieu d'un index numérique"
mais ne l'utilise pas pour définir l'option active, uniquement pour appeler, activer, désactiver et charger.
Aucune de ces réponses n'a fonctionné pour moi. Je viens de contourner le problème. J'ai fait ça:
$('#tabs-tab1').removeClass('tabs-hide');
$('#tabs-tab2').addClass('tabs-hide');
$('#container-tabs a[href="#tabs-tab2"]').parent().removeClass('tabs-selected');
$('#container-tabs a[href="#tabs-tab1"]').parent().addClass('tabs-selected');
Ça marche très bien.
<div id="tabs" style="width: 290px">
<ul >
<li><a id="myTab1" href="#tabs-1" style="color: Green">Báo cáo chuẩn</a></li>
<li><a id="myTab2" href="#tabs-2" style="color: Green">Báo cáo mở rộng</a></li>
</ul>
<div id="tabs-1" style="overflow-x: auto">
<ul class="nav">
<li><a href="@Url.Content("~/Report/ReportDate")"><span class=""></span>Báo cáo theo ngày</a></li>
</ul>
</div>
<div id="tabs-2" style="overflow-x: auto; height: 290px">
<ul class="nav">
<li><a href="@Url.Content("~/Report/PetrolReport#tabs-2")"><span class=""></span>Báo cáo nhiên liệu</a></li>
</ul>
</div>
</div>
var index = $("#tabs div").index($("#tabs-1" ));
$("#tabs").tabs("select", index);
$("#tabs-1")[0].classList.remove("ui-tabs-hide");
J'ai trouvé cela fonctionne plus facilement que d'obtenir un index. Pour mes besoins, je sélectionne un onglet basé sur un hachage d'URL
var target = window.location.hash.replace(/#/,'#tab-');
if (target) {
jQuery('a[href='+target+']').click().parent().trigger('keydown');
}
C'est la réponse
var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
En s'appuyant sur la réponse de @ stankovski, une manière plus précise de le faire, qui fonctionnera pour tous les cas d'utilisation (par exemple, lorsqu'un onglet se charge via ajax et que l'attribut href de l'ancre ne correspond pas au hachage), l'identifiant de tout case correspondra à l'attribut "aria-controls" de l'élément li. Ainsi, par exemple, si vous essayez d'activer un onglet basé sur location.hash, qui est défini sur l'id de l'onglet, il est préférable de rechercher "aria-controls" plutôt que "href".
Avec jQuery UI> = 1.9:
var index = $('#tabs > ul > li[aria-controls="simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
Dans le cas de la définition et de la vérification du hachage de l’URL:
Lors de la création des onglets, utilisez l'événement 'activate' pour définir location.hash sur l'ID du panneau:
$('#tabs').tabs({
activate: function(event, ui) {
var scrollTop = $(window).scrollTop(); // save current scroll position
window.location.hash = ui.newPanel.attr('id');
$(window).scrollTop(scrollTop); // keep scroll at current position
}
});
Utilisez ensuite l'événement hashchange de la fenêtre pour comparer location.hash à l'ID du panneau (pour ce faire, recherchez l'attribut aria-controls de l'élément li):
$(window).on('hashchange', function () {
if (!location.hash) {
$('#tabs').tabs('option', 'active', 0);
return;
}
$('#tabs > ul > li').each(function (index, li) {
if ('#' + $(li).attr('aria-controls') == location.hash) {
$('#tabs').tabs('option', 'active', index);
return;
}
});
});
Ceci gérera tous les cas, même lorsque les onglets utilisent ajax. De plus, si vous avez des onglets imbriqués, il n'est pas trop difficile de gérer cela en utilisant un peu plus de logique.
Selon le document d'interface utilisateur:
Commencez par obtenir l'index de l'onglet que vous souhaitez activer.
var index = $('#tabs a[href="'+id+'"]').parent().index();L'activer
tabs.tabs( "option", "active", index );
Je l'ai fait comme ça
if (document.location.hash != '') {
//get the index from URL hash
var tabSelect = document.location.hash.substr(1, document.location.hash.length);
console.log("tabSelect: " + tabSelect);
if (tabSelect == 'discount')
{
var index = $('#myTab a[href="#discount"]').parent().index();
$("#tabs").tabs("option", "active", index);
$($('#myTab a[href="#discount"]')).tab('show');
}
}
$ ("# tabs"). tabs ({actif: [0,2], désactivé: [3], sélectionné: 2}); Où sélectionné est utilisé pour l'onglet particulier ouvert ou pour sélectionner un onglet particulier à la charge.
Je pars du principe que vous avez vraiment une mise en page comme:
<ul class="tabs">
<li id="tabone">one</li>
<li id="tabtwo">two</li>
</ul>
SI cette hypothèse est correcte, vous utilisez simplement l'ID pour sélectionner "l'onglet"
$('#tabone').css("display","none");
EDIT: sélectionnez l'onglet de votre mise en page:
var index = $('.tabs ul').index($('#tabone'));
$('.tabs ul').tabs('select', index);