Karty przewijania/stronicowania JQuery

Question

Próbuję utworzyć prosty pasek zakładek witryny, która może przewijać karty, które nie mieszczą się na stronie. Jest to bardzo proste i nie musi mieć żadnego ajaxu ani dynamicznie ładowanej treści ... po prostu wyświetla wszystkie karty, a po kliknięciu prowadzi do innej strony.

mam odtłuszczone do internetu i nie wydaje się znaleźć coś innego niż: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html jednak jest to bardzo ciężkie i skomplikowane ... szukam lekkiej przykład w jQuery. Jeśli ktokolwiek może mi pomóc, będę wdzięczny!

Answer 1

skończyło się pisząc to sam z div, który znajduje się przelewowy ustawiony jest ukryty. Następnie użyj jquery poniżej, aby przesunąć zakładki w 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 wyglądał następująco:

<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

Czy po prostu można zawijać zakładki w DIV z overflow-x: auto set w CSS?

Answer 3

Zawsze używam JQuery UI tabs jako punktu początkowego dla kart. Możesz dostosować pobieranie JQuery do interfejsu użytkownika w sekcji pobierania witryny. Ta metoda powinna być lżejsza niż jakakolwiek inna implementacja, jeśli już używasz JQuery w swojej witrynie.

Po wyjęciu z pudełka zakładki interfejsu JQuery nie zapewniają przewijania, którego pragniesz. Uważam, że można to osiągnąć poprzez zmianę CSS, ale najprawdopodobniej będzie to łatwiejsze, jeśli zmienisz nawigację swojej witryny (np. Stworzysz więcej poziomów, użyjesz krótszych tytułów).

Nadzieja to pomaga

Answer 4

właśnie stworzył plugin sobie: dom projektu: http://jquery.aamirafridi.com/jst