Dziudek's jogger

Pora zakończyć tematykę przewijania elementów z użyciem frameworka mootools. Dziś skupimy się na kursorze myszki i pluginie scroller.js. Ów plugin zawiera jak się pewnie domyślacie klasę Scroller, która służy do przewijania elementów, których zawartość jest po części ukryta dzięki atrybutowi overflow. Klasa ta odczytuje położenie kursora myszki i na tej podstawie przewija dany element. Pewnie każdy kojarzy pewną funkcjonalność Google Maps pozwalającą na "chwycenie" w pewnym punkcie mapki i jej przewijanie za pomocą poruszania kursorem do czasu "puszczenia" mapy. Na uzyskanie tego typu efektów pozwala właśnie klasa Scroller.

Składnia tej klasy jest typowa dla klas efektów:

var scroll = new Scroller(element,{opcje});

Jak widzimy, żadnych nowości w tym zakresie. Mamy do dyspozycji dwie opcje, jedno zdarzenie, a dodatkowo klasa Scroller posiada dwie kluczowe metody - start i stop. Ale zacznijmy od obiektu opcji:

• area - jest to podawany w pikselach rozmiar swego rodzaju "ramki", która otacza od wewnątrz nasz przewijany element - jeżeli kursor znajdzie się nad jej obszarem to dopiero wtedy może zacząć przewijać element. Jest to więc grubość aktywnego obszaru przewijanego elementu. Domyślna wartość to 20 pikseli.
• velocity - opcja ta określa prędkość z jaką następuje przewijanie - domyślna wartość to 1.
• onChange - zdarzenie, które występuje w momencie przesunięcia kursora nad obszarem aktywnym określonym (jeśli chodzi o rozmiar) w opcji area. Domyślnie ma przypisaną pewną funkcję więc trzeba ją podmienić tak by nie uniemożliwić działania klasy Scroller.

Jeśli chodzi o wspomniane metody - pierwsza (start) służy do rozpoczęcia przewijania (pod warunkiem, że kursor porusza się nad obszarem aktywnym, poza nim nic się nie stanie), a druga (stop) do jego przerwania.

Mamy zasadniczo dwie główne możliwości wykorzystania tych metod, które przedstawię w przykładach.

Na początek przyjmijmy, że mamy element typu div z mapką w środku - mapka jest dużo większa od elementu nadrzędnego więc nie mieści się cała w tymże elemencie. Trzeba jakoś zorganizować przewijanie. Zaczniemy od wersji gdzie aby móc przewijać trzeba przytrzymać lewy przycisk myszy.

Tworzymy naszą instancję klasy Scroller i ustawiamy grubość obszaru aktywnego na 200 pikseli:

var przewijanie = new Scroller("przewijany",{area: 250});

I to już właściwie jedna trzecia całego kodu :) Teraz tylko dodajemy do przewijanego elementu zdarzenia mouseup i mousedown wraz z odpowiednimi funkcjami:

$("przewijany").addEvent("mousedown", function(){przewijanie.start();});
$("przewijany").addEvent("mouseup", function(){przewijanie.stop();});

Jak widać przy wciśnięciu przycisku myszy rozpoczynamy przewijanie, a kończymy je wraz z puszczeniem tego przycisku.

Oczywiście cały kod ląduje w zdarzeniu onload obiektu window (będę to powtarzał do upadłego, aż niektórzy przestaną popełniać ten irytujący błąd :P ) i już możemy oglądać nasz kod w akcji:

PRZYKŁAD 1

Proste ? Drugi przykład będzie bardzo podobny - zmieniają się tylko zdarzenia i obszar aktywny:

var przewijanie = new Scroller("przewijany",{area: 100, velocity: 1});

$("przewijany").addEvent("mouseover", function(){przewijanie.start();});
$("przewijany").addEvent("mouseout", function(){przewijanie.stop();}

Jak widzimy w drugim wypadku aktywacja przewijania następuje w momencie znalezienia się kursora nad przewijanym elementem, a kończy się po opuszczeniu go przez kursor. Zmniejszyłem obszar aktywny bo im byłby on większy tym bardziej irytujące byłoby przewijanie :)

I kod w akcji:

PRZYKŁAD 2

Plugin scroller.js jest jak mogliście zauważyć prościutki w użytku, a daje przyjemne efekty ;) I to już wszystko co mogłem napisać o przewijaniu elementów w mootools. W następnej części kursu zajmiemy się pluginem sortables.js związanym z techniką drag'n'drop.