Dziudek's jogger

Przyszła pora na ostatni plik z grupy Effects - fx.slide.js, który służy do zwijania i rozwijania elementów, zarówno w pionie jak i w poziomie. Wcześniej do tego celu były używane klasy Fx.Width i Fx.Height, które pewnie niektórzy znają z mojego kursu moo.fx .

Zaletą w stosunku do klas Fx.Width i Fx.Height jest fakt iż ukrywanie elementu nie zmienia jego rozmiaru - nie zobaczymy zatem "upychania" zawartości na coraz mniejszym obszarze jak miało to miejsce w przypadku wspomnianych klas.

Klasa Fx.Slide bo to jej poświęcimy uwagę w tej części kursu, posiada 5 metod:

• slideIn
• slideOut
• show
• hide
• toggle

Dwie pierwsze metody służą odpowiednio do pokazywania i ukrywania elementu, dwie kolejne metody służą do tego samego tyle, że bez stosowania animacji, a ostatnia metoda służy do pokazywania/ukrywania elementu w zależności od tego czy jest on ukryty czy nie.

Efekt slide, jest bardzo często stosowany w Internecie, bo pozwala na ukrycie mniej istotnych informacji do momentu kliknięcia jakiegoś elementu, który je pokaże, poza tym pozwala też na przykład na ukrywanie przez użytkownika mniej ważnych dla niego zawartości itd. Krótko mówiąc możliwości zastosowania ograniczone tylko naszą wyobraźnią :)

Nasze działania skupią się dziś wokół trzech przykładów - pierwszego z ukrywaniem pionowym treści kilku akapitów, drugiego związanego z ukrywaniem poziomym i trzeciego w którym dzięki analizie kodu pliku fx.slide.js stworzymy sobie w prosty sposób pewne udogodnienie, ale o tym później :)

Tworzenie efektu slide jest oczywiście bardzo podobne do tworzenia efektów pozostałych typów. Składnia wygląda następująco:

var slider = new Fx.Slide('id_elementu', {opcje});

Poza standardowymi opcjami jakie klasa Fx.Slide dziedziczy z klasy Fx.Base, dochodzi jeszcze opcja mode - która określa kierunek animacji - vertical (pionowy) lub horizontal (poziomy).

Zatem stworzenie pionowego efektu slide polega na stworzeniu obiektu z użyciem opcji mode ustawionej na vertical:

var slider = new Fx.Slide('div_testowy',{mode: 'vertical'});

W praktyce jednak wystarczy zapis:

var slider = new Fx.Slide('div_testowy');

ponieważ domyślną wartością opcji mode jest właśnie 'vertical'.

Jak wspominałem pierwszy przykład będzie służył zwijaniu bloków teksty (akapitów). Przyjmijmy, że rozwijać/zwijać akapity ma użytkownik poprzez kliknięcie odpowiedniego nagłówka tekstu. Oczywiście moglibyśmy stworzyć teraz po kolei efekty slide i dodać zdarzenia do odpowiednich nagłówków, ale z reguły taka struktura jest powtarzalna - jest określona liczba nagłówków i paragrafów. Dlatego by uelastycznić kod skorzystamy z pętli, która automatycznie stworzy efekty i doda zdarzenia onclick do nagłówków. Dzięki temu dodanie kolejnych nagłówków i paragrafów tekstu nie będzie wymagało zmiany skryptu, a jedynie skorzystania z określonej struktury kodu.

Nasze nagłówki będą miały przypisaną klasę "naglowek", a paragrafy klasę "akapit".

Z akapitów tworzymy tablicę :

var tab_p = $$(".akapit");

A na tablicy nagłówków wykonujemy bezpośrednio nasze operacje - na początek stworzenie efektu slide:

$$(".naglowek").each(function(element,index){
   var slider = new Fx.Slide(tab_p[index]);
});

Następnie dodajemy zdarzenie onclick do samego nagłówka:

$$(".naglowek").each(function(element,index){
   var slider = new Fx.Slide(tab_p[index]);

   element.addEvent("click",function(){
      slider.toggle();
   });
});

I powyższy kod w połączeniu z odpowiednią strukturą kodu pozwoli nam uzyskać efekt taki jak w poniższym przykładzie:

PRZYKŁAD 1

Jak widzicie pierwszy przykład jest banalny w implementacji. Gdyby ktoś chciał go umieścić na swojej stronie to oczywiście wypadałoby dopisać zapis w cookies informacji o tym, które paragrafy są ukryte. Ale to już zadanie dla tych, którzy chcą ten efekt u siebie mieć ;)

W kolejnym przykładzie zajmiemy się trochę bardziej złożonym zadaniem. Każdy pewnie kojarzy efekt accordion, a jak nie kojarzy to polecam spojrzeć na stronkę biblioteki moo.fx. My stworzymy działający na tej samej zasadzie efekt, ale w poziomie. Jakie są założenia działania naszego skryptu ? Przede wszystkim zawsze musi być widoczny tylko jeden rozwinięty element. Kliknięcie na przycisk aktywujący drugi element musi ukryć ten poprzedni. Pewnie sposobów na napisanie tego typu skryptu jest wiele więc będziecie mogli pokombinować co zmienić i ulepszyć :)

Element naszej układanki będzie składał się z aktywatora i akapitu - kliknięcie na aktywator będzie rozwijało akapit. Pierwszy akapit będzie od razu rozwinięty - pozostałe będą ukryte. Aby nie rozbijać struktury strony będziemy musieli wykorzystać małą sztuczkę - wszystkie akapity poza pierwszym ukryjemy za pomocą stylu display:none; a następnie przy ładowaniu strony zmienimy ten styl na display:block; i oczywiście od razu zastosujemy metodę hide. No ale po kolei: zacznijmy od przygotowania sobie potrzebnych w tym skrypcie zmiennych - nasze paragrafy musimy umieścić w tablicy - a na tablicy aktywatorów wykonamy przypisanie wszystkich parametrów:

var tab_p = $$(".akapit");

Przyda się też zmienna przechowująca informację o tym, który paragraf jest aktualnie rozwinięty :

var aktualny_p = 0;

Zaczynamy od 0 bo tak samo są liczone indeksy w tablicach - po co wykonywać później zbędne operacje dodawania ?

Przyda się jeszcze tablica w której będziemy trzymali nasze efekty:

var tab_e = [];

Przy każdym aktywatorze musimy wykonać następujące operacje: stworzenie efektu, zapisanie efektu w tablicy, dodanie zdarzenia onclick do aktywatora, nadanie paragrafowi (poza pierwszym) atrybutu style="display: block;" i ukrycie go metodą hide. Dodatkowo tworzonemu przez klasę Fx.Slide divowi nadrzędnemu nadawany jest styl float:left tak aby nie następowało rozbicie elementów na kilka linii.

Zatem:

$$(".aktywator").each(function(element,index){
   var slider = new Fx.Slide(tab_p[index],{mode: "horizontal"});
   tab_e[index] = slider;

   if(index > 0){
      tab_p[index].setStyle("display","block");
      slider.hide();
      tab_p[index].getParent().setStyle("float","left");
   }
   else{
      tab_p[index].getParent().setStyle("float","left");
   }

   element.addEvent("click",function(){
      if(aktualny_p !== index){
         tab_e[aktualny_p].slideOut();
         aktualny_p = index;
         tab_e[index].slideIn();
      }
   });
});

Z powyższego kodu chyba tylko kod zdarzenia onclick przypisywanego do aktywatora może wydać się skomplikowany, dlatego już tłumaczę - na początku sprawdzane jest czy chcemy rozwinąć już rozwinięty element - jeżeli tak to nic się nie stanie bo chcemy aby zawsze co najmniej jeden element był rozwinięty. W drugim wypadku aktualnie rozwinięty element jest ukrywany (zwijany), następuje zmiana wartości zmiennej przechowującej informację o aktualnie otwartym paragrafie i zostaje rozwinięty paragraf do którego jest przypisany klikany aktywator.

I powyższy kod w akcji:

PRZYKŁAD 2

Na koniec opiszę małe usprawnienie dla klasy Fx.Slide, które może się niektórym przydać. Posiada ona małą wadę, otóż animacja przebiega tylko w jedną stronę ustaloną przez programistów mootools. A co jeśli chcielibyśmy, żeby zwijanie/rozwijanie pionowe przebiegało od dołu do góry, a nie od góry do dołu (tzn. aby przy zwijaniu pionowym dolna krawędź przemieszczała się do góry, powodując tym samym widoczność tekstu w górnej części elementu do końca) ? Jest to do zrobienia. Gorzej w wypadku animacji poziomej - jeżeli chcemy ukrywać element poprzez jego odsunięcie w prawą stronę to zamiast przerabiać klasę Fx.Slide lepiej stworzyć div w divie i nadać im tą samą szerokość, a następnie operować na właściwości margin-right wewnętrznego diva (oczywiście ba divy muszą mieć ustawione overflow:hidden).

Natomiast jeśli chodzi o zwijanie pionowe to musimy dodać do naszego skryptu taki kod:

Fx.Slide.implement({
   vertical: function(){
      this.margin = 'margin-bottom';
      this.layout = 'height';
      this.offset = this.element.offsetHeight;
   }
});

Zmieniamy właściwość this.margin z "margin-top" na "margin-bottom" i to wystarczy by efekt przebiegał w inny sposób. Oczywiście zmiany dotyczą całej klasy Fx.Slide. Jeśli chcemy mieć dostęp do obu typów pionowych animacji to musimy stworzyć klasę potomną klasy Fx.Slide i dopiero do niej dopisać powyższy kod:

Fx.SlideReverse = Fx.Slide.extend({
   vertical: function(){
      this.margin = 'margin-bottom';
      this.layout = 'height';
      this.offset = this.element.offsetHeight;
   }
});

Oczywiście dalej tworzymy efekt na tej samej zasadzie co wcześniej.

Ja z tego rozwiązania skorzystałem w swoim przykładzie po to by łatwo było zauważyć różnicę pomiędzy oboma typami animacji:

PRZYKŁAD 3

I to już wszystko na temat nie tylko klasy Fx.Slide, ale i grupy Effects. W dwóch kolejnych częściach kursu zajmiemy się grupą Drag