Dziudek's jogger

Zapoznaliśmy się z podstawowymi efektami biblioteki moo.fx – pora przejść do bardziej zaawansowanych efektów, które będą chyba najbardziej przydatne w praktyce – chodzi mi tutaj o operacje płynnej zmiany szerokości, wysokości i przezroczystości, które dają możliwość rozwijania i zwijania za pomocą jednej funkcji.

Plik moo.fx.utils.js zawiera 3 klasy:

• Fx.Height
• Fx.Width
• Fx.Opacity

Klasy te umożliwiają łatwe dodanie operacji modyfikowania parametrów danego elementu. Każda z nich ma do dyspozycji dwie funkcje – toggle() służącą do zmiany danej wielkości z jednego stanu do drugiego (na przykład ukrycie elementu poprzez zmianę właściwości opacity z 1 do 0) oraz funkcję show(), która pokazuje dany element od razu bez wykonywania efektu.

Zapis w wypadku wszystkich trzech klas jest taki sam i wygląda następująco:

efekt = new Fx.nazwa_klasy(‘nazwa_elementu’,{opcje dodatkowe});

Wykonanie efektu następuje przez wywołanie funkcji:

efekt.toggle();

Myślę, że składnia powinna być już całkowicie zrozumiała, dlatego pokażę od razu przykłady dla wszystkich trzech klas bez dokładniejszych opisów, by się ciągle nie powtarzać:

efekt = new Fx.Height(‘test’,{duration: 500});

PRZYKŁAD 1

efekt = new Fx.Width(‘test’,{duration: 500});

PRZYKŁAD 2

efekt = new Fx.Opacity(‘test’,{duration: 500});

PRZYKŁAD 3

Dwie uwagi natury technicznej:

Jeżeli nasz element, na którym wykonujemy operację Fx.Width lub Fx.Height ma ustawione wartości typu padding czy border, to należy pamiętać, że element ten nie zostanie zwinięty całkowicie, a jedynie do wysokości / szerokości jaka jest równa sumie paddingów / obramowań w pionie lub w poziomie, a na dodatek nie będzie go można rozwinąć gdyż element taki jest traktowany jako element posiadający wysokość i przy ponownym kliknięciu będzie następowała próba jego dalszego zwinięcia:

PRZYKŁAD 4

Jeżeli chcemy by zwijany i rozwijany element miał obramowanie i padding, lepiej skorzystać z klasy Fx.Style lub Fx.Styles – wtedy mamy pełną kontrolę nad rozmiarem elementu, oraz jego właściwościami, jednak wymaga to znacznie więcej kodu JavaScript – wniosek z tego nasuwa się jeden – jeżeli chcemy zwijać i rozwijać element bez paddingu i obramowania to klasy Fx.Height i Fx.Width są do tego najlepsze, natomiast gdy chcemy mieć kontrolę nad naszym elementem i posiada on wyżej wymienione właściwości to należy skorzystać z klasy Fx.Style lub Fx.Styles.

Druga kwestia dotyczy zawartości elementów i klasy Fx.Height – jeżeli są one puste to po ich zwinięciu, nie rozwiną się one ponownie, ponieważ wysokość elementu zależy tutaj od jego zawartości (działa to też w drugą stronę – jeżeli element posiada więcej treści niż widać na początku (dzięki zastosowaniu właściwości overflow: hidden) to element zostanie później rozwinięty tak by pokazać całą swoją zawartość):

PRZYKŁAD 5

Warto jeszcze zauważyć, że gdy klikniemy przycisk aby zwinąć element to w Firefoxie i Operze zniknie on całkowicie, a w Internet Explorerze pozostanie po nim wolne miejsce. Przejdź do opisu pliku accordion.js