Các tab cuộn/phân trang JQuery

Question

Tôi đang cố gắng tạo thanh tab đơn giản cho trang web có khả năng cuộn cho các tab không vừa trên trang. Điều này khá đơn giản và không cần phải có bất kỳ nội dung ajax hoặc tải động nào ... nó chỉ hiển thị tất cả các tab và khi bạn nhấp vào một tab, nó sẽ đưa bạn đến một trang khác.

Tôi đã loại bỏ internet và dường như không tìm thấy bất kỳ điều gì khác ngoài: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html tuy nhiên điều này rất nặng và phức tạp ... Tôi đang tìm một ví dụ nhẹ trong jquery. Nếu có ai có thể giúp tôi biết ơn!

Answer 1

Tôi đã tự viết chính bản thân mình với một div tràn bộ được đặt thành ẩn. Sau đó, sử dụng jquery bên dưới để di chuyển các tab trong div.

$(document).ready(function() 
    { 
     $('.scrollButtons .left').click(function() 
     { 
     var content = $(".tabs .scrollable .content") 
     var pos = content.position().left + 250; 
     if (pos >= 0) 
     { 
      pos = 0; 
     } 
     content.animate({ left: pos }, 1000); 
     }); 
     $('.scrollButtons .right').click(function() 
     { 
     var content = $(".tabs .scrollable .content") 
     var width = content.children('ul').width(); 
     var pos = content.position().left - 250; 
     //var width = content.width(); 
     if (pos <= (width * -1) + 670) 
     { 
      pos = (width * -1) + 600; 
     } 
     content.animate({ left: pos }, 1000); 
     }); 
    }); 

My Html trông như thế này:

<div class="tabs"> 
    <div class="scrollable"> 
     <div class="content"> 
      <ul> 
       <li>Tab1</li> 
       <li>Tab2</li> 
       <li>Tab3</li> 
       <li>Tab4</li> 
       <li>Tab5</li>      
       </ul> 
     </div> 
    </div> 
    <div class="scrollButtons"> 
     <ul> 
      <li> 
       <div class="left"> 
       </div> 
      </li> 
      <li> 
       <div class="right"> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

Bạn có thể đơn giản quấn các tab trong DIV bằng overflow-x: tự động đặt trong CSS không?

Answer 3

Tôi luôn sử dụng JQuery UI tabs làm điểm bắt đầu cho tab. Bạn có thể tùy chỉnh tải xuống JQuery UI trong phần tải xuống của trang web. Phương pháp này phải nhẹ hơn bất kỳ triển khai nào khác, nếu bạn đã sử dụng JQuery trên trang web của mình.

Ngoài hộp, các tab Giao diện người dùng JQuery sẽ không cung cấp cho bạn cuộn bạn muốn. Điều này tôi tin có thể đạt được bằng cách thay đổi CSS, nhưng nhiều khả năng sẽ dễ dàng hơn nếu bạn thay đổi điều hướng trang web của bạn (tức là tạo nhiều cấp độ hơn, sử dụng tiêu đề ngắn hơn).

Hy vọng điều này sẽ giúp

Answer 4

Tôi vừa tạo ra một Plugin bản thân mình: nhà dự án: http://jquery.aamirafridi.com/jst