Dziudek's jogger

Oto i on - ostatni z pluginów mootools - chyba wiecie co to oznacza :) Muszę w tym miejscu dodać iż mam szczególny sentyment do tego plugina - to on jeszcze jako składnik biblioteki moo.fx i jej strony głównej sprawił, że zainteresowałem się najpierw wspomnianą biblioteką, a później samym mootools. Kto wie czy gdyby nie ten plugin to czy kurs mootools w ogóle by powstał :) Sam efekt, który oferuje do dziś robi na mnie wrażenie - ja po prostu akurat ten efekt uwielbiam i mam nadzieję, że Wy też go polubicie :)

Klasa Accordion pozwala nam na animację elementów w taki sposób, że po aktywowaniu danego elementu poprzedni element aktywny jest ukrywany. W ten sposób zawsze aktywny jest tylko jeden element.

Składnia klasy Accordion wygląda następująco:

var efekt = new Accordion("aktywatory", "elementy", {opcje}, $("kontener"));

Zmienna aktywatory to selektor CSS odnoszący się do kolekcji elementów po których kliknięciu dany element zostanie aktywowany. Zmienna elementy to to samo co zmienna aktywatory, ale dotyczy elementów zależnych od aktywatorów. Obiekt {opcje} to oczywiście pozostałe parametry klasy Accordion, a zmienna kontener to identyfikator elementu w jakim zawarte są składniki naszego elementu.

Opcje klasy Accordion:

• show - opcja określająca, który element ma być rozwinięty po uruchomieniu skryptu. Jako wartość podajemy indeks elementu (numerowanie jak w tablicach czyli od 0),
• display - opcja działająca na tej samej zasadzie co opcja show z tą różnicą, że element jest rozwijany z animacją (w wypadku show po prostu się pojawia),
• fixedHeight - wartość określająca stałą wysokość rozwijanych elementów. Domyślnie (false) każdy element ma wysokość dostosowaną do ilości tekstu.
• fixedWidth - opcja tego samego typu co fixedHeight tyle, że dotyczy ona szerokości elementów.
• height - wartość logiczna określająca czy w animacji ma być stosowana zmiana wysokości elementu. Domyślnie opcja ta ma wartość true.
• opacity - wartość logiczna określająca czy w animacji ma być stosowana zmiana przezroczystości elementu. Domyślnie opcja ta ma wartość true.
• width - wartość logiczna określająca czy w animacji ma być stosowana zmiana szerokości elementu. Domyślnie opcja ta ma wartość false. Opcja ta ma raczej zastosowanie w efektach poziomych podobnych do tych jakie prezentowałem przy okazji prezentacji klasy Fx.Slide .
• alwaysHide - wartość logiczna określająca czy można zwinąć wszystkie elementy (true), czy też zawsze jeden element ma być rozwinięty (false).

Wszelkie operacje związane ze zmianą szerokości elementu w trakcie animacji mogą powodować pewne problemy związane z CSS i wyglądem elementów - osobiście polecam nie polecam tego typu animacji. Pokazałem już, że Fx.Slide może godnie zastąpić klasę Accordion w tej kwestii.

Zdarzenia klasy Accordion:

• onActive - zdarzenie wywoływane w momencie rozwijania elementu.
• onBackground - zdarzenie wywoływane w momencie zwijania elementu.

Metody klasy Accordion:

• addSection - metoda dodająca kolejny element efektu.
• display - metoda pozwalająca na aktywowanie danego aktywatora bez klikania go. Jej wadą jest fakt iż po dodaniu nowego elementu metodą addSection, nadal poprzez indeksy odnosi się do podstawowych elementów bez uwzględnienia nowych.

Pora na praktykę :) Stworzymy efekt klasy Accordion najpierw wersji podstawowej, a później dodamy parę upiększeń ;)

Aktywatorami w naszym wypadku będą nagłówki drugiego poziomu klasy "toggler", a rozwijanymi elementami będą paragrafy klasy "element":

var efekt = new Accordion('h2.toggler', 'p.element');

Powyższa linijka spowoduje powstanie bardzo ładnego efektu - kliknijcie na jednym z paragrafów poniższego przykładu:

PRZYKŁAD 1

W powyższym przykładzie kliknięcie na rozwinięty paragraf nie spowoduje nic. Ale wystarczy dodać opcję alwaysHide i teraz kliknięcie na jakikolwiek nagłówek spowoduje animację (ukrywania lub pokazywania):

var efekt = new Accordion('h2.toggler', 'p.element', {
    alwaysHide: true
});

I powyższy kod w akcji:

PRZYKŁAD 2

Ustalmy teraz stałą wysokość wszystkich rozwijanych elementów na 150 pikseli:

var efekt = new Accordion('h2.toggler', 'p.element', {
    alwaysHide: true,
    fixedHeight: 150
});

PRZYKŁAD 3

Dobrze by też było gdyby dla odmiany zamiast pierwszego rozwijał się jako pierwszy trzeci element:

var efekt = new Accordion('h2.toggler', 'p.element', {
    alwaysHide: true,
    fixedHeight: 150,
    display: 2
});

PRZYKŁAD 4

Pora wykorzystać potencjał zdarzeń klasy Accordion - dodamy efekt zmiany koloru tła z szarego na biały dla aktywnego aktywatora - najpierw tworzymy podstawy zdarzeń onActive i onBackground:

var efekt = new Accordion('h2.toggler', 'p.element', {
    alwaysHide: true,
    fixedHeight: 150,
    display: 2,
    onActive: function(toggler){},
    onBackground: function(toggler){}
});

Jak widać oba zdarzenia jako pierwszy argument przyjmują uchwyt do aktywatora. Warto dodać, że drugi argumentem może być rozwijany/zwijany element.

Ważne jest by do zmiany koloru tła wykorzystać klasę Fx.Styles ponieważ oferuje nam ona możliwość nie określania początkowej wartości zmienianej właściwości. W wypadku klasy Fx.Style animacja przebiegałaby od danego koloru do końcowego co w naszym wypadku spowodowałoby zmiany koloru wszystkich aktywatorów. A dzięki klasie Fx.Styles kolor pozostałych aktywatorów nie ulega zmianie bo animacja dąży od koloru podstawowego do końcowego więc w wypadku pozostałych aktywatorów kolor się po prostu nie zmienia:

var efekt = new Accordion('h2.toggler', 'p.element', {
    alwaysHide: true,
    fixedHeight: 150,
    display: 2,
    onActive: function(toggler){
        new Fx.Styles(toggler).start({
            "background-color" : "#FFF"
        });
     },
     onBackground: function(toggler){
        new Fx.Styles(toggler).start({
            "background-color": "#EFEFEF"
        });       
     }
});

I cały przykład w akcji:

PRZYKŁAD 5

Pozostało nam jeszcze omówić metody klasy Accordion. Metoda addSection jako pierwszy argument przyjmuje uchwyt do aktywatora, drugi argument to uchwyt do elementu rozwijanego, a trzeci argument to pozycja na jakiej ma się znaleźć nowy element po dodaniu do pozostałych elementów. Tworzymy przycisk "dodaj", który będzie dodawał nowy element do naszego efektu na pierwszej pozycji:

var efekt = new Accordion('h2.toggler', 'p.element', {
    alwaysHide: true,
    fixedHeight: 150,
    display: 2,
    onActive: function(toggler){
        new Fx.Styles(toggler).start({
            "background-color" : "#FFF"
        });
    },
    onBackground: function(toggler){
        new Fx.Styles(toggler).start({
            "background-color": "#EFEFEF"
        });       
    }
});
   
$("dodaj").addEvent("click",function(){
    efekt.addSection(new Element('h2', {'class': 'toggler'}).appendText('Wstęp'), new Element('p', {'class': 'element'}).appendText('Kliknij na wybranym paragrafie by aktywować efekt klasy Accordion...'), 0);
});

Pozwoliłem sobie od razu tworzyć elementy zamiast tworzyć kolejne zmienne.

Dodajmy do tego wszystkiego przycisk, który aktywuje pierwszy paragraf:

var efekt = new Accordion('h2.toggler', 'p.element', {
    alwaysHide: true,
    fixedHeight: 150,
    display: 2,
    onActive: function(toggler){
        new Fx.Styles(toggler).start({
            "background-color" : "#FFF"
        });
    },
    onBackground: function(toggler){
        new Fx.Styles(toggler).start({
            "background-color": "#EFEFEF"
        });       
    }
});
   
$("dodaj").addEvent("click",function(){
    efekt.addSection(new Element('h2', {'class': 'toggler'}).appendText('Wstęp'), new Element('p', {'class': 'element'}).appendText('Kliknij na wybranym paragrafie by aktywować efekt klasy Accordion...'), 0);
});

$("pokaz").addEvent("click",function(){
    efekt.display(0);
});

W efekcie otrzymamy coś takiego:

PRZYKŁAD 6

I tym akcentem zakończyliśmy kurs frameworka MooTools 1.1(1) :) Mam nadzieję, że te 41 wpisów się przydało ;)