javascript - index - Pestañas de jQuery: obtener índice recién seleccionado

jquery selector

Question

Anteriormente utilicé la extensión de jquery-ui tabs para cargar fragmentos de página a través de ajax , y para ocultar o revelar div ocultos dentro de una página. Ambos métodos están bien documentados, y no he tenido problemas allí.

Ahora, sin embargo, quiero hacer algo diferente con las pestañas. Cuando el usuario selecciona una pestaña, debe volver a cargar la página por completo. El motivo es que el contenido de cada sección con pestañas es un tanto costoso de renderizar, por lo que no quiero simplemente enviarlos todos a la vez y usar el método normal de alternar ''pantalla: ninguno'' para revelarlos.

Mi plan es interceptar el evento de select pestañas y hacer que esa función vuelva a cargar la página manipulando document.location.

¿Cómo, en el controlador de select , puedo obtener el índice de pestaña recién seleccionado y el objeto html LI al que corresponde?

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

¿Hay algún atributo del evento o del objeto ui que pueda leer que proporcione el índice, el ID o el objeto de la pestaña recién seleccionada o la etiqueta de anclaje dentro de él?

¿O hay una forma mejor de usar pestañas para volver a cargar toda la página?

Answer 1

Descubrí dos formas de cumplir este requisito, ya que es difícil para mí poner el código aquí, puedes echarle un vistazo en http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

Espero que eso ayude a alguien ...

Answer 2

Echaré un vistazo a los events de Pestañas. Lo siguiente está tomado de los documentos de 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
 });

Parece que ui.tab es el camino a seguir.

Answer 3

Otra opción que he usado para mi sitio web es esta. Es un sistema básico de navegación con pestaña UL / Div. La clave para disparar la pestaña correcta al hacer clic en un enlace a otra página con una marca de almohadilla adjunta, es simplemente filtrar a través de su UL para el # ejemplo que coincida con lo que se está pasando a través del navegador. Es así.

Aquí está el ejemplo 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>

Y el Jquery para hacerlo realidad:

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

  });

});

Eso debería encargarse de eso. Sé que este no es el código más limpio, pero te llevará allí.

Answer 4

Una mirada rápida a la documentación nos da la solución:

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

La declaración anterior activará la tercera pestaña.

Answer 5

en jQuery UI - v1.9.2

ui.newTab.index()

para obtener un índice base 0 de pestaña activa

Answer 6

en mi implementación funciona como:

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

Answer 7

gracias, jobscry - el ''ui.tab'' que me apuntó me dio la etiqueta ancla anotada, de la cual puedo extraer su clase, id, href, etc ... Elijo usar el id para codificar mi url. Mi última pestañas () se ve así:

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

Answer 8

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

funciona bien para mi ver: http://api.jqueryui.com/tabs/#events