Dziudek's jogger

moo.fx to lekka biblioteka efektów dla stron, oparta o JavaScript. Właściwie można ją traktować jako uproszczoną wersję mootools opartą na lekkiej wersji biblioteki prototype. moo.fx pozwala nam na proste tworzenie ciekawych efektów. Chciałbym opisać te możliwości gdyż nie trafiłem na żaden sensowny polski tutorial na ten temat, a uważam, że biblioteka ta jest warta uwagi ze względu na kompatybilność z popularnymi przeglądarkami – Internet Explorerem, Firefoxem, Operą i Konquerorem. (prawdopodobnie także pod Safari, ale nie mam możliwości przetestowania - prawdopodobnie bo mootools jest kompatybilny z Safari, więc moo.fx też powinno być ;) ). Pod Operą w wersji 8.* i w Konquerorze brak jest obsługi przezroczystości elementów - reszta efektów działa bez zarzutów ;) Dodatkową motywacją do opisania moo.fx był fakt, że niestety na stronie projektu nie znalazłem takiego opisu, a jedynie odniesienia do dokumentacji mootools. I wszystko byłoby dobrze, gdyby nie fakt, że występują pewne różnice pomiędzy moo.fx, a mootools co utrudnia szybkie poznanie obsługi tej biblioteki. Niektóre rzeczy wręcz zostały pominięte, niektóre nie są jeszcze opisane, a część opisów w ogóle nie ma związku z rzeczywistością (na przykład możemy napotkać różniące się nazwami funkcje w klasach).

Dla kogo jest moo.fx ?

moo.fx to biblioteka dla osób, które chcą dodać swojej stronie nieco "życia", ale nie kosztem "ciężkich" bibliotek efektów JS. Kompatybilność z popularnymi przeglądarkami sprawia, że większość użytkowników Internetu, będzie mogła obejrzeć efekty stworzone za pomocą tej biblioteki (jeśli oczywiście mają włączoną obsługę JavaScript ;) ). moo.fx bazuje na dwóch plikach:

• moo.fx.js - zawiera klasę bazową i podstawowe funkcje biblioteki – to właściwie „serce” całej biblioteki.
• prototype.lite.js - lekka wersja biblioteki prototype, która jest niezbędna do prawidłowego działania moo.fx.

Dodatkowo w skład biblioteki wchodzą:

• moo.fx.pack.js - zawiera funkcje do płynnego przewijania i zmiany koloru elementów oraz ich zawartości,
• moo.fx.utils.js - funkcje do zmiany wysokości, szerokości i przezroczystości elementów strony,
• moo.fx.transitions.js - zbiór operacji do obsługi dodatkowych efektów dla elementów strony,
• accordion.js - obiekt do operacji na wielu elementach z wykorzystaniem modyfikatorów wysokości, szerokości i przezroczystości.

Dwa bazowe pliki są niezbędne, natomiast pozostałe pliki są opcjonalne i dodajemy je w zależności od naszych potrzeb. Wszystkie sześć plików razem waży około 17kB - czyli mało jak na swoje możliwości ;) . Dodatkowo należy zauważyć, że gdybyśmy chcieli użyć tylko niektórych efektów to ciężar biblioteki znacznie spada - z reguły wystarczy około 10kB kodu biblioteki ;) Oczywiście mówimy tu o nie modyfikowanym kodzie – dzięki kompresji i usunięciu zbędnych elementów rozmiar całej biblioteki znacznie maleje i wynosi zaledwie kilka kilobajtów.

Jaka wiedza jest potrzebna by zacząć kurs ?

Aby móc skorzystać z opisów zawartych w kursie moo.fx potrzebna nam będzie znajomość XHTML, CSS, dodatkowo potrzebna będzie przynajmniej podstawowa znajomość JavaScript i co najmniej świadomość tego czym jest DOM i jakie daje nam możliwości.

Zanim zaczniemy

Przed rozpoczęciem omawiania pliku moo.fx.js chciałbym jeszcze omówić dwie konstrukcje, które będą często (a właściwie zawsze) wykorzystywane w dalszej części opisu biblioteki moo.fx . Chodzi mi mianowicie o zapis zdarzenia onload dla strony oraz odwoływanie się do danego elementu według jego identyfikatora. W opisie zamiast zdarzenia onload umieszczonego w znaczniku body strony, będę stosował zapis:

window.onload = function(){ /* Tu funkcje uruchamiane po załadowaniu strony... */ }

Dzięki temu ilość kodu w pliku XHTML będzie minimalna. Aby odwoływać się do elementu po jego identyfikatorze, będziemy wykorzystywać funkcjonalność jaką daje nam plik prototype.lite.js: zamiast zapisu:

document.getElementById('identyfikator_elementu');

będę używał zapisu:

$('identyfikator_elementu');

Myślę, że teraz możemy już przejść do właściwej części kursu :)

Pora zaczynać

Bibliotekę moo.fx opisałem według kolejnych plików wchodzących w jej skład. Zacznijmy więc od podstawowego jej elementu - pliku moo.fx.js ;) Przejdź do opisu możliwości pliku moo.fx.js