Zakładki jQuery - pobieranie nowo wybranego indeksu

Question

Używałem wcześniej rozszerzenia jquery-ui tabs do ładowania fragmentów stron przez ajax oraz do ukrywania lub ujawniania ukrytych div s na stronie. Obie te metody są dobrze udokumentowane i nie miałem żadnych problemów.

Teraz jednak chcę zrobić coś innego za pomocą zakładek. Gdy użytkownik wybierze kartę, powinien całkowicie załadować stronę - powodem jest to, że zawartość każdej sekcji z zakładkami jest nieco droga do renderowania, więc nie chcę po prostu wysyłać wszystkich naraz i używać normalnej metody przełączania "display: none", aby je odsłonić.

Mój plan polega na przechwyceniu zdarzenia tabulatorów "select, a funkcja ta odświeża stronę poprzez manipulowanie położeniem document.location.

W jaki sposób w instrukcji obsługi select mogę uzyskać nowo wybrany indeks tabulacji i obiekt HTML LI, któremu odpowiada?

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

Czy jest atrybutem obiektu zdarzenia lub ui że mogę przeczytać, że da indeksu, ID, lub obiekt nowo wybranej zakładki lub znacznika zakotwiczenia w nim?

A może jest lepszy sposób na wykorzystanie kart do przeładowania całej strony?

Answer 1

Chciałbym rzucić okiem na events dla kart. Z dokumentów jQuery pochodzi:

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

Wygląda na to, że ui.tab jest drogą do zrobienia.

Answer 2

dziękuję, jobscry - wskazany przez Ciebie "ui.tab" dał mi zakotwiczony znacznik zakotwiczenia, z którego mogę wyodrębnić jego klasę, id, href, etc ... Wybieram użycie identyfikatora do zakodowania mojego adresu URL . Moja ostatnia zakładki() wywołanie wygląda tak:

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

w moim realizacji to działa tak:

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

Albo inna opcja Użyłem mojej strony jest to. Jest to podstawowy system nawigacyjny UL/Div. Kluczem do wystrzelenia właściwej zakładki po kliknięciu łącza do innej strony z dołączonym znakiem krzyżyka jest po prostu filtrowanie przez UL dla #przykładu dopasowanego do tego, co jest przekazywane przez przeglądarkę. To tak jak.

Oto przykład 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> 

A Jquery aby tak się stało:

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

    }); 

}); 

To powinno dbać o to dla ciebie. I knwo to nie jest najczystszy kod, ale dostaniesz tam.

Answer 5

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

działa dobrze dla mnie. patrz: http://api.jqueryui.com/tabs/#events

Answer 6

ja znaleźliśmy się na dwa sposoby, aby osiągnąć ten wymóg, ponieważ jest to trudne dla mnie, aby umieścić kod tutaj, można spojrzeć na to na http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

nadzieję, że ktoś pomoże ..

Answer 7

Szybkie spojrzenie w dokumentacji daje nam rozwiązanie:

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

Powyższe stwierdzenie będzie aktywować kartę trzecią.

Answer 8

w jQuery UI - v1.9.2

ui.newTab.index() 

dostać bazowa 0 indeks aktywnej karcie