search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS][jQuery] Animowane zakładki

W Internecie można znaleźć mnóstwo pluginów do tworzenia do zakładek dla swoich stron, ale często są one albo zbyt skomplikowane albo z jakiegoś powodu nie działają.
Mam zamiar przedstawić Tobie sposób, który działa na 100% i jest bardzo prosty w obsłudze.

Zaczynamy od kodu HTML:

<div id="taby">
<!--tutaj definiujemy linki do zakładek-->
    <a class="tab_link tab_link_wybrany" title="#tab1" href="#">Zakładka 1</a>
    <a class="tab_link" title="#tab2" href="#">Zakładka 2</a>
    <a class="tab_link" title="#tab3" href="#">Podsumowanie</a>
 
<!--trzeba wyczyścić float, inaczej się wszystko może rozjechać-->
	<div class="clear">
    </div>
 
<!--treść zakładek; należy zwrócić uwagę na nazewnictwo (id)-->
	<div id="tab1" class="tab_text tab_wybrany">
        Cras id lorem. Cras turpis a leo. Integer lorem pretium quis, dui. Suspendisse dapibus in, odio. In hac habitasse platea dictumst. Maecenas fermentum odio. Nunc ut turpis. Nullam magna et ultrices et, fermentum ultrices condimentum ultricies, hendrerit libero. Integer egestas, nulla massa, dictum convallis. Cras sed massa volutpat metus. Maecenas blandit sed, ultrices eget, sollicitudin vitae, commodo est diam, venenatis leo ultrices adipiscing elit. Mauris aliquet elit, sit amet neque. Pellentesque et magnis dis parturient montes, nascetur ridiculus mus. Praesent feugiat. Cum sociis natoque penatibus et malesuada fames ac lacus. Pellentesque fermentum imperdiet orci magna blandit non, fringilla non, vehicula.
    </div>
	<div id="tab2" class="tab_text">
        Giedrojć z czego wybrać u jednej dwórórki. Wyczha! poszli, a nic - mój kus cap ! - kanonada. Ruskie przysłowie: z Podkomorzyną obok Korsak, towarzysz jego nie mogą. Słońce ostatnich kresów nieba spadała w bitwie, gdzie nie szpieg, a nic - wprawdzie chartów, bo tak były pod Twoją opiek ofiarowany, martwą podniosłem powiek i aby w grób się kiedyś demokratą. Bo nie nalewa szklanki, i musiał pochodzić od chmielu tyki w oczy podniósł, i tam pewnie na jutro sam ku studni, której lat blisko drzwi poglądał jakby wstęgą, miedz zieloną, na piersiach, przydawając zasłony sukience. Włos w pułku gadano, jak.
    </div>
	<div id="tab3" class="tab_text">
        I to by było na tyle. Prawda, że proste?
    </div>
</div>

Teraz należy dodać jakieś style do tych zakładek. W tym przykładzie proponuję takie:

.tab_link {
    float: left; /*ważne aby to dodać*/
    border: 1px solid black;
    background: #333333;
    padding: 5px;
    margin-right: 10px ;
    color: #ffffff;
    text-decoration: none;
    font-variant: small-caps;
}
.tab_link_wybrany {
	background-color: #b30000;
}
.tab_text {
    display: none;
    border: 1px solid black;
    padding: 5px;
    color: #000000;
}
#taby {
	width: 500px;
	margin: 50px auto;
}
.clear {
	clear: both;
}

A na koniec trochę kodu w JavaScript, który zapewni nam pożądany efekt:

$(document).ready(function(){
/*Przez to, że wszystkie zakładki są ukryte, to wyświetlamy je nadając im klasę .tab_wybrany korzystając z efektu fadeIn(). Jeśli chcesz korzystać z zakładek bez efektu animacji, to zamiast fadeIn() wpisz show()*/
        $(".tab_wybrany").fadeIn();
//kiedy link do zakładki zostaje wciśnięty...
        $(".tab_link").live("click", function(event){
/*...blokuje domyślne zachowanie, jakim byłaby próba wczytywania pliku zdefiniowanego w href...*/
            event.preventDefault();
/* ...usuwanie klasy tab_link_wybrany z aktywnego obecnie linku... */
            $(".tab_link_wybrany").removeClass("tab_link_wybrany");
/* ...dodanie tej klasy do wybranego linku */
            $(this).addClass("tab_link_wybrany");
/*...pobierz dane z atrybutu title zdefiniowanego w linku (który wskazuje na id wybranej zakładki z treścią)*/
            var container_id = $(this).attr("title");
//...animuj zakładkę zmieniając jej wysokość i przezroczystość
            $(".tab_wybrany").animate({
                height : "toggle" , opacity : "toggle"
//...a gdy animacja się skończy...
            },function(){
//...usuń klasę tab_wybrany z obecnej aktywnej zakładki...
                $(this).removeClass("tab_wybrany");
//...i dodaj tą klasę do zakładki do której prowadził link...
                $(container_id).addClass("tab_wybrany");
//...wykonaj ponownie animację...
                $(".tab_wybrany").animate({
                    height : "toggle" , opacity : "toggle"
                });
            });
        });
    });

Na koniec należy pamiętać aby dodać bibliotekę jQuery do pliku z kodem strony poprzez:

<script type="text/javascript" src="jquery.js"></script>

I to byłoby na tyle. Demo jest dostępne tutaj: animowane zakładki - demo
Uważam, że kod jest na tyle jasno wyjaśniony, że nie trzeba nic tłumaczyć więcej.

  • nie bardzo rozumiem, co chcesz przez to powiedzieć?

  • Jakub

    mam na myśli sposób rozwijania tekstu. Zakładki-przyciski w tej chili są na górze a treść po kliknięciu na którąkolwiek z zakładek rozwija się w dół. A ja zacząłem kombinować tak aby uzyskać efekt odwrotny czyli aby zakładki-przyciski były na dole a tekst po kliknięciu na nie rozwijał się po „y” do góry. Mam nadzieję że tym razem dość jasno to napisałem :).
    Próbowałem robić tak że div id=”taby” z zakładkami przenosiłem niżej pod ale wtedy zakładki owszem były pod treścią ale po kliknięciu animowały się razem z tekstem np. div tab2, który jest nad nimi do góry a chciałem tego uniknąć.

    Pozdrawiam

  • Jak znajdę chwilę czasu to spróbuję Ci pomóc. Na tą chwilę jestem zajęty sesją.