Các tab jQuery - nhận chỉ mục mới được chọn

Question

Tôi đã sử dụng phần mở rộng jquery-ui tabs để tải các đoạn trang qua ajax và để che giấu hoặc tiết lộ các trang div ẩn trong một trang. Cả hai phương pháp này đều được ghi lại tài liệu và tôi không gặp vấn đề gì ở đó.

Bây giờ, tuy nhiên, tôi muốn làm điều gì đó khác biệt với các tab. Khi người dùng chọn một tab, nó sẽ tải lại hoàn toàn trang - lý do cho điều này là nội dung của mỗi phần tab có phần đắt tiền để hiển thị, vì vậy tôi không muốn chỉ gửi tất cả cùng một lúc và sử dụng phương pháp thông thường của toggling 'display: none' để tiết lộ chúng.

Kế hoạch của tôi là chặn các sự kiện 'select tab' và có chức năng đó tải lại trang bằng cách thao tác document.location.

Làm cách nào, trong trình xử lý select, tôi có thể nhận chỉ mục tab mới được chọn và đối tượng LI html tương ứng không?

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

Có thuộc tính của sự kiện hoặc đối tượng ui mà tôi có thể đọc sẽ cung cấp chỉ mục, id hoặc đối tượng của tab mới được chọn hoặc thẻ liên kết trong đó không?

Hoặc có cách nào tốt hơn để sử dụng các tab để tải lại toàn bộ trang không?

Answer 1

Tôi sẽ xem events cho tab. Dữ liệu sau đây được lấy từ tài liệu 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 
}); 

Có vẻ như ui.tab là cách để thực hiện.

Answer 2

cảm ơn, jobscry - 'ui.tab' bạn chỉ ra đã cho tôi thẻ neo được nhấp vào, từ đó tôi có thể trích xuất lớp, id, href, v.v ... tôi chọn sử dụng id để mã hóa url của tôi . tab() gọi cuối cùng của tôi trông như thế này:

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

trong việc thực hiện của tôi nó hoạt động như:

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

Hoặc một lựa chọn Tôi đã sử dụng cho trang web của tôi là thế này. Nó là một hệ thống điều hướng UL/Div Tab cơ bản. Chìa khóa để kích hoạt tab chính xác khi nhấp vào liên kết đến một trang khác có gắn dấu băm, chỉ đơn giản là lọc qua UL của bạn cho #example khớp với những gì được truyền qua trình duyệt. Nó giống như vậy.

Dưới đây là ví dụ 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> 

Và Jquery để làm cho nó xảy ra:

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

    }); 

}); 

Điều đó sẽ chăm sóc nó cho bạn. Tôi knwo đây không phải là mã sạch nhất, nhưng nó sẽ nhận được ya ở đó.

Answer 5

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

hoạt động tốt cho tôi. xem: http://api.jqueryui.com/tabs/#events

Answer 6

tôi đã tìm ra hai cách để thực hiện yêu cầu này, vì nó là khó khăn cho tôi để đặt mã ở đây, bạn có thể có một cái nhìn vào nó trên http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

Hy vọng rằng sẽ giúp một ai đó ..

Answer 7

Một cái nhìn nhanh chóng vào tài liệu hướng dẫn cho chúng ta giải pháp:

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

Những tuyên bố trên sẽ kích hoạt các tab thứ ba.

Answer 8

trong jQuery UI - v1.9.2

ui.newTab.index() 

để có được một số cơ sở 0 của tab hoạt động