nagradzam tutoriale

  • SlideUp, SlideDown, SlideToggle - wjazdy i zjazdy w jQuery

    dodano 17.01.2008 / komentarzy: 3 / autor: palmiak

    jquery tutorialPisałem już jak za pomocą jQuery płynnie ukrywać lub pokazywać elementy na stronie. Teraz przyszedł czas by pokazać inny na to sposób.

    slideUp

    Funkcja slideUp() spowoduje, że nasz np. div zwinie się niczym roleta. Może trudno to sobie wyobrazić, dlatego lepiej spójrzmy na pierwszy przykład. Po kliknięciu w obrazek nasz tekst się “zwinie”.

    Składnia tej funkcji wygląda następująco slideUp("slow"|"normal"|"fast"|czas_w_milisekundach);

    W naszym przykładzie wyglądało to zaś następująco (resztę, czyli kod XHTML oraz CSS mozna zobaczyć patrząc w źródło):

    $(document).ready(function() {
    $("h2 img").click(function() {
                    $("p").slideUp("slow");
            });
    });

    Po kliknięciu w obrazek znajdujący się w <h2>, <p> się powolutku schowało.

    slideDown

    Analogicznie do poprzedniej funkcji, tylko służy do pokazywania a nie chowania.

    Składnia tej funkcji wygląda następująco slideDown("slow"|"normal"|"fast"|czas_w_milisekundach);

    W praktyce wygląda to tak jak w przykładzie.

    $(document).ready(function() {
            $("p").hide();
            $("h2 img").click(function() {
                    $("p").slideDown("slow");
            });
    });

    Tym razem najpierw musieliśmy ukryć <p>. Następnie po kliknięciu w obrazek <p> nam się rozwija.

    slideToggle

    slideToggle() ukrywa element, który jest widoczny lub pokazuje ten który jest ukryty. Przełącza międza stanami widoczny/ukryty.

    Składnia niczym nie różni się od poprzednich funkcji slideToggle("slow"|"normal"|"fast"|czas_w_milisekundach);.

    By zobaczyć działanie w praktyce zapraszam do przykładu. Prosze sobie kliknąć kilka razy w obrazek.

    $(document).ready(function() {
            $("h2 img").click(function() {
                    $("p").slideToggle("slow");
            });
    });

    Chyba nie trzeba nic tłumaczyć, ponieważ poza zamianą slideUp() na slideToggle() niczym się ten kod nie różni się od tego z pierwszego przykładu.

    Zbierzmy to do kupy

    Gdy już wiemy jak działają poszczególne funkcje przyszedł czas by wykorzystać je w praktyce. Zróbmy więc menu akordeonowe.

    Jak widać rozbudowaliśmy troszkę zawartość. Pierwszą rzeczą jaką musimy zrobić przy takim menu jest ukryć wszystkie <p> poza pierwszym. Następnie po kliknięciu w jakiś obrazek musimy zwinąć wszystkie widoczne <p> oraz rozwinąć ten pod belką którą wybraliśmy.

    $(document).ready(function() {
            $("p").not("li:first").slideUp("slow");
            $("h2 img").click(function() {
                    $("p:visible").slideUp("slow");
                    $(this).parent("h2").next("p").slideDown("slow");
            });
    });

    Komentarze / dodaj komentarz


    • autor: SlideUp, SlideDown, SlideToggle - wjazdy i zjazdy w jQuery | Tworzenie stron www. Projektowanie
      dodano: 20.01.2008

      [...] Pisałem już jak za pomocą jQuery płynnie ukrywać lub pokazywać elementy na stronie. Teraz przyszedł czas by pokazać inny na to sposób. (more…) [...]


    • autor: danket
      dodano: 24.06.2008

      No wszystko fajnie, tylko że w cholernym IE7 nie do końca to pracuje w sytuacji, gdy któryś element jest wypozycjonowany.


    • autor: palmiak
      dodano: 24.06.2008

      Mógłbyś podesłaś linka z przykładem?

    Napisz komentarz