Strona złożona z tabs'ów

[Heyek]

Witam,
Potrzebuję zrobić stronkę zbudowaną z "kilku stron". Cała strona będzie 1 stroną przewijaną w dół, a na dole będzie znajdował się pasek ze strzałką do następnej strony. Po kliknięciu pierwsza strona przesunie się dynamicznie w lewo i pojawi się nowa (z innym tłem, inną treścią, innymi modułami).

Ma ktoś może pomysł jak coś takiego zrobić i w jakiej technologii ?

[hieroshima]

no chyba jedyna rozsądna technologia to javascript i najrozsądniej chyba z biblioteką jQuery chociaż co kto lubi bibliotek JS'owych jest sporo więcej równie ciekawych( można się pokusić o pure javascript ). Kwestia przyzwyczajenia, ale do jQuery będzie masa przykładów, gotowców, tutków.

[Heyek]

Dzięki za odpowiedź. Znalazłem tabsy w JS które nadają się do zbudowania czegoś takiego. Mam jednak mały problem. Tak jak pisałem tabsy będą dłuższe i będzie konieczność przewijania strony w dół. Chciałbym żeby buttony next/prev były umieszczone na pasku u dołu strony który będzie przesuwał się razem ze stroną ( position:fixed; ). Aktualnie buttony pojawiają się dopiero na samym dole strony. Umieściłem ten pasek ale nie wiem jak wyciągnąć tą funkcję na ten pasek, żeby buttony suwały się na pasku razem z nim.

Skrypt wygląda tak:

Kod:

<script type="text/javascript">
        $(function() {

            var $tabs = $('#tabs').tabs();
    
            $(".ui-tabs-panel").each(function(i){
    
              var totalSize = $(".ui-tabs-panel").size() - 1;
    
              if (i != totalSize) {
                  next = i + 2;
                     $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
              }
      
              if (i != 0) {
                  prev = i;
                     $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
              }
           
            });
    
            $('.next-tab, .prev-tab').click(function() {
                   $tabs.tabs('select', $(this).attr("rel"));
                   return false;
               });
      

        });
    </script>

[Kartofelek]

CSS:

Kod:

    body, html {
        width:100%;
        background:#fafafa;
        height:100%;
        padding:0;
        margin:0;
    }
    .page-container {
        width:100%;
        height:100%;
        min-width: 840px;    
        overflow: hidden;
        overflow-y:auto;
        position: relative;
    }
    .slide {        
        width:100%;
        height:100%;
        position: absolute;        
        top:0;
        left:100%;
        padding:0 0;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }
    .slide:first-of-type {
        left:0;
    }

        .pasek {
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        background:#000; ..........
    }

JS

Kod:

$(function() {
    function gotoNextSlide() {
                $('#slideCurrent').animate({left : '-100%'}, 600);
                $('#slideNext').animate({left : 0}, 600);
        }
});

Pasek z guzikami też wcale nie musi być 1. Każdy tab może mieć swój własny pasek. Position fixed też możesz przecież animować tak samo jak przesuwanie tabów.

[Heyek]

Dzięki, zrobiłem troszkę inaczej ale też dobrze działa Mam teraz następny problem. Mianowicie chciałbym dodać do tego skryptu, skrypt powiększający obrazki i wyświetlający tekst w boxie. http://bitbonsai.com/facybox/ Jak umieszczam to w pliku z tabsami to ten skrypt zaczyna działać, a tamten cały się wysypuje. Można coś z tym zrobić ?

[hieroshima]

http://api.jquery.com/jQuery.noConflict/

[Kartofelek]

Użyj sobie colorbox. I ładniejszy a lepszy