web-dev-qa-db-fra.com

onglets jQuery - Obtenir l'index nouvellement sélectionné

J'ai déjà utilisé jquery-ui tabs extension pour charger des fragments de page via ajax et pour masquer ou révéler les _divs cachés dans une page. Ces deux méthodes sont bien documentées et je n’y ai rencontré aucun problème.

Maintenant, cependant, je veux faire quelque chose de différent avec les onglets. Lorsque l'utilisateur sélectionne un onglet, il doit recharger entièrement la page. La raison en est que le contenu de chaque section à onglets est un peu coûteux à restituer. Je ne souhaite donc pas les envoyer tous en une fois et utiliser la méthode normale. de basculer 'display: none' pour les révéler.

Mon plan consiste à intercepter l'événement select des onglets et à laisser cette fonction recharger la page en manipulant document.location.

Comment, dans le gestionnaire select, puis-je obtenir l'index de tabulation nouvellement sélectionné et l'objet html LI auquel il correspond?

$('#edit_tabs').tabs(  {
        selected: 2,     // which tab to start on when page loads
        select: function(e, ui) {
            var t = $(e.target);
            // alert("data is " +  t.data('load.tabs'));  // undef
            // alert("data is " +  ui.data('load.tabs'));  // undef

            // This gives a numeric index...
            alert( "selected is " + t.data('selected.tabs') )
            // ... but it's the index of the PREVIOUSLY selected tab, not the
            // one the user is now choosing.  
            return true;

            // eventual goal is: 
            // ... document.location= extract-url-from(something); return false;
        }
});

Existe-t-il un attribut de l'événement ou de l'objet ui que je peux lire qui donne l'index, l'id ou l'objet de l'onglet nouvellement sélectionné ou de la balise d'ancrage qu'il contient? 

Ou existe-t-il un meilleur moyen d'utiliser des onglets pour recharger toute la page?

javascriptjqueryjquery-uijquery-pluginsjquery-ui-tabs
26
Matt Hucke

Je voudrais jeter un oeil sur events for Tabs. Ce qui suit est tiré de la documentation jQuery:

 $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

On dirait que ui.tab est la voie à suivre.

37
imjoevasquez

dans l'interface utilisateur de jQuery - v1.9.2

ui.newTab.index()

obtenir un index de base 0 de l'onglet actif

7
aorlando
select: function(e, ui){var index=ui.index;}

fonctionne bien pour moi. voir: http://api.jqueryui.com/tabs/#events

5
user376026

merci, jobscry - le 'ui.tab' que vous avez signalé m'a fourni la balise d'ancrage sur laquelle je peux extraire sa classe, son identifiant, son href, etc. Mon dernier appel onglets () ressemble à ceci:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            // it has an id of "link_foo_bar"
            // transform it into http://....something&cmd=foo-bar
            var url = idToTabURL(ui.tab.id);

            document.location = url;
            return false;
        }
    }).show();
});
0
Matt Hucke

J'ai découvert deux manières de satisfaire à cette exigence, car il est difficile pour moi de mettre du code ici, vous pouvez le consulter/ http://ektaraval.blogspot.com/2011/09/calling-javascript- when-jquery-ui-tab.html

J'espère que ça aide quelqu'un ..

0
Ekta

dans mon implémentation cela fonctionne comme:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            var url = ui.tab.href;

            document.location = url;
            return false;
        }
    }).show();
});
0
Klaus Albert

Ou une autre option que j'ai utilisée pour mon site Web est la suivante. C'est un système de navigation de base UL/Div. La clé pour activer le bon onglet lorsque vous cliquez sur un lien vers une autre page avec un signe dièse attaché est simplement en filtrant votre UL pour le # exemple qui correspond à ce qui est transmis par le navigateur. C'est comme ça.

Voici l'exemple HTML:

    <div id="tabNav">

  <ul class="tabs">
    <li><a href="#message">Send a message</a></li>
    <li><a href="#shareFile">Share a file</a></li>
    <li><a href="#arrange">Arrange a meetup</a></li>
  </ul>
</div>

<div id="tabCont">

  <div id="message">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="shareFile">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="arrange">
    <p>Ut enim ad minim veniam</p>
  </div>

</div>

Et le Jquery pour y arriver:

$(document).ready(function() {
$(function () {
    var tabs = [];
    var tabContainers = [];

    $('ul.tabs a').each(function () {
      // note that this only compares the pathname, not the entire url
      // which actually may be required for a more terse solution.
        if (this.pathname == window.location.pathname) {
            tabs.Push(this);
            tabContainers.Push($(this.hash).get(0));
        }
    });

    $(tabs).click(function () {
        // hide all tabs
        $(tabContainers).hide().filter(this.hash).show();


        // set up the selected class
        $(tabs).removeClass('active');
        $(this).addClass('active');

        return false;

});




 $(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

  });

});

Cela devrait en prendre soin pour vous. Je sais que ce n'est pas le code le plus propre, mais ça vous y mènera.

0
Wes

Un rapide coup d'œil dans la documentation nous donne la solution: 

$('#edit_tabs').tabs({ selected: 2 });

La déclaration ci-dessus activera le troisième onglet.

0
Yasser