jQuery pestañas - obteniendo recientemente índice seleccionado

Question

He usado anteriormente la extensión jquery-ui tabs para cargar fragmentos de página a través de ajax, y para ocultar u ocultar div s 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 select de las pestañas, y hacer que esa función vuelva a cargar la página manipulando document.location.

¿Cómo, en el controlador select, puedo obtener el índice de pestañas recientemente 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 un atributo del objeto de evento o ui que puedo leer que dará el índice, identificación, u objeto de la pestaña recién seleccionada o la etiqueta de anclaje dentro de ella?

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

Answer 1

Me gustaría echar un vistazo a events para pestañas. Lo siguiente es tomado de la documentación 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 2

thanks, jobscry - el 'ui.tab' que me indicó 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 llamada pestañas() tiene el siguiente aspecto:

$(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 3

en mi aplicación que 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 4

u otra opción que he utilizado para mi sitio web es la siguiente. 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 de 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 que esto ocurra:

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

    }); 

}); 

que debe tener cuidado de él para usted. Sé que este no es el código más limpio, pero te llevará allí.

Answer 5

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

funciona bien para mí. veo: http://api.jqueryui.com/tabs/#events

Answer 6

he encontrado dos maneras de lograr esto requisito, ya que es difícil para mí poner código aquí, usted puede tener una mirada en ella en http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

la esperanza de que ayude a alguien ..

Answer 7

Un rápido vistazo a la documentación nos da la solución:

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

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

Answer 8

en jQuery UI - v1.9.2

ui.newTab.index() 

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