Dziudek's jogger

accordion.js to ostatni plik wchodzący w skład biblioteki moo.fx , oferujący jednocześnie chyba najbardziej nas interesujący efekt – możliwość operowania na grupie elementów.

Dzięki klasie Fx.Accordion możemy w łatwy sposób stworzyć efekt, który polega na tym, że pokazywany jest rozwinięty jeden element, a w chwili kliknięcia na element rozwijający inny składnik całego efektu, poprzednio otwarty element jest zwijany. Tak więc zawsze otwarty jest (co najwyżej) jeden element. Myślę, że najlepiej zobrazuje to przykład:

PRZYKŁAD

Z kodu źródłowego tego przykładu można zauważyć, że ten efekt nie wymaga żadnej funkcji wykonywanej po kliknięciu – wystarczy tylko odpowiednio skonstruowane zdarzenie onload.

Aby efekt accordion zadziałał musimy mieć dostęp do elementów, które będą powodowały rozwijanie się treści, jak i samych rozwijanych elementów. Uzyskujemy go poprzez stworzenie zmiennych zawierające elementy danej klasy:

var zmienna = document.getElementsByClassName('nazwa_klasy’);

Musimy oczywiście stworzyć dwie takie zmienne – jedną zawierającą wszystkie elementy służące do rozwijania i drugą zawierającą wszystkie elementy rozwijane. Gdy posiadamy te zmienne możemy zapisać zmienną samego efektu accordion:

efekt = new Fx.Accordion(zmienna_elementow_rozwijajacych, zmienna_elementow_rozwijanych,{opcje_dodatkowe});

W ten sposób utworzony zostanie efekt, który mogliśmy obserwować w przykładzie.

Klasa Fx.Accordion posiada także kilka własnych opcji:

• alwaysHide wartość logiczna określająca czy wszystkie elementy mogą być zwinięte – domyślnie ma wartość false – zawsze jeden element jest rozwinięty,
• onActive definiuje funkcję uruchamianą wtedy, gdy element jest rozwijany (składnia opcji analogiczna do opcji onStart i onComplete),
• onBackground definiuje funkcję uruchamianą wtedy, gdy element jest zwijany (składnia opcji analogiczna do opcji onStart i onComplete),
• height wartość logiczna, określająca czy przy zwijaniu i rozwijaniu elementów będzie modyfikowana ich wysokość. Domyślna wartość true,
• opacity wartość logiczna, określająca czy przy zwijaniu i rozwijaniu elementów będzie modyfikowana ich przezroczystość. Domyślna wartość true,
• width wartość logiczna, określająca czy przy zwijaniu i rozwijaniu elementów będzie modyfikowana ich szerokość (uwaga – opcja ta jest niedopracowana – także w najnowszej wersji mootools, także mogą wystąpić problemy z jej wykorzystaniem). Domyślna wartość false.

Mała uwaga co do obramowań i paddingów – w wypadku efektu accordion nie stanowią one problemu dla modyfikacji wysokości elementu – po zwinięciu, element się rozwinie, ale należy pamiętać, że po zwinięciu pewna część elementu będzie nadal widoczna.

Myślę, że nie ma się co rozwodzić na dalszymi przykładami – zasada działania efektu jest prosta i znana – gdy dołączymy do tego możliwości zawarte w pozostałych plikach biblioteki (na przykład efekty związane z plikiem moo.fx.transitions.js) to nagle okaże się, że w tej małej bibliotece tkwią przeogromne możliwości :-)