Dziudek's jogger

Wraz z tą częścią kursu rozpoczynamy dwuczęściowe dokształcanie się w dziedzinie przewijania elementów. Plugin slider.js służy do tworzenia paska przewijania. Sam pasek jest tworzony przez klasę Slider, która na podstawie informacji o elementach tworzy go.

Do stworzenia paska przewijania potrzebujemy zaledwie dwóch elementów - dwóch divów z których jeden jest zagnieżdżony w drugim. Ten zagnieżdżony będzie służył do przewijania, a ten nadrzędny będzie ścieżką dla przewijanego w nim diva.

Klasa Slider jest dość rozbudowana w stosunku do już poznanych pluginów - posiada 3 własne opcje, jedną metodę, 3 zdarzenia, a przy inicjalizacji pobiera 3 argumenty (a więc małe odstępstwo od dotychczasowych reguł - zwykle klasa związana z efektami pobierała dwa argumenty).

Zaczniemy od teorii, a następnie zajmiemy się stworzeniem dwóch pasków przewijania - poziomego i pionowego.

Składnia klasy Slider jest ściśle związana z budową samego paska przewijania:

var pasek = new Slider("sciezka","galka",{opcje});

gdzie zmienna "sciezka" to oczywiście identyfikator ścieżki po jakiej będzie można poruszać elementem posiadającym identyfikator przypisany do zmiennej "galka". Obiekt opcji to oczywiście dodatkowe parametry klasy i zdarzenia:

• steps - opcja ta definiuje ilość miejsc na ścieżce w których przy przesuwaniu gałki wystąpi zdarzenie onChange (domyślna wartość to 100),
• mode - opcja w której możemy zdecydować o typie paska przewijania - poziomy ("horizontal" - wartość domyślna) lub pionowy ("vertical"),
• offset - dzięki temu parametrowi możemy określić jak daleko (w pikselach) poza ścieżkę może wyjść podczas przesuwania nasza gałka - jest opcja raczej o znaczeniu estetycznym. Domyślna wartość to 0.
• onChange - zdarzenie to występuje w momencie przemieszczenia się gałki. Jego częstotliwość zależy od opcji steps. W tym zdarzeniu definiujemy to co ma się dziać w czasie przemieszczania gałki.
• onComplete - zdarzenie, które pojawi się w momencie zakończenia przesuwania gałki.
• onTick - to zdarzenie określa co stanie się gdy użytkownik kliknie w dowolnym miejscu ścieżki. Domyślnie do miejsca kliknięcia zostaje przesunięta gałka.

I pozostaje nam metoda set. Jest ona bardzo prosta w użyciu - przy wywołaniu jako argument pobiera miejsce do jakiego ma się przesunąć gałka (oczywiście argument ten należy do przedziału [0, steps] ):

pasek.set(0);

Powyższy kod ustawi gałkę na początku ścieżki.

Jak widzimy klasa Slider oddaje nam do dyspozycji wszystkie narzędzia niezbędne do stworzenia pełnowartościowego paska przewijania. Tak naprawdę możnaby się pokusić o stworzenie odpowiednika standardowego paska przewijania, jednak złożoność tego zagadnienia (trzeba uwzględnić przytrzymywanie przycisków góra/dół czy poruszanie rolką myszki w obrębie przewijanego elementu i nad paskiem, długość gałki do przewijania zależna od ilości treści w elemencie), sprawia, że skupimy się na prostszych przykładach. Warto jednak mieć świadomość, że dzięki klasie Slider istnieje możliwość stworzenia nietypowego paska przewijania, które z reguły spotykamy w animacjach flash.

Nasze przykłady zaczniemy od poziomego paska przewijania - będziemy przewijać div z bardzo długim tekstem, którego widoczność została ograniczona przez parametr overflow.

Jeśli chodzi o kod xHTML to wystarczy nam wiedza, że identyfikatory elementów są takie same jak w przypadku prezentowanej składni klasy Slider, a przewijany element ma identyfikator "przewijany".

Zaczynamy od pobrania danych o przewijanym elemencie po to by móc ustalić wartość niektórych opcji klasy Slider:

var rozmiary = $("przewijany").getSize();

Interesuje nas długość elementu na której podstawie określimy wartość opcji steps. Przyjmijmy, że przewinięcie będzie powodowało przesunięcie o 5 pikseli:

var s = (rozmiary.scrollSize.x/5).round();

Jak widzimy zaokrąglamy wynik dzielenia długości elementu przez wartość pojedynczego przesunięcia, a następnie w wypadku gdy wartość długości przewijanego elementu nie była podzielna przez 5, zwiększamy zmienną s o jeden:

if(rozmiary.scrollSize.x > s){
   s++;
}

Teraz możemy już przejść do samej klasy Slider:

var pasek = new Slider("sciezka","galka",{steps: s});

Pozostaje jeszcze dodać zdarzenie onChange i metodę set:

var pasek = new Slider("sciezka","galka",{
   steps: s,
   onChange: function(step){
      $("przewijany").scrollTo(step*5,0);
   }
}).set(0);

Jak widzimy zdarzenie onChange pobiera jako argument aktualną pozycję gałki. Powyższy kod umieszczamy oczywiście w zdarzeniu onload obiektu window i już możemy podziwiać pasek przewijania w akcji:

PRZYKŁAD 1

To teraz pora na to samo tylko, że pionie i z paroma dodatkami.

Po pierwsze - pierwsza linijka pozostaje bez zmian - nadal musimy mieć dostęp do rozmiarów elementów:

var rozmiary = $("przewijany").getSize();

W kolejnych linijkach zmienia się tylko x na y:

var s = (rozmiary.scrollSize.y/5).round();

if(rozmiary.scrollSize.y > s){
   s++;
}

Także klasę Slider inicjujemy w podobny sposób, zmienia się kod zdarzenia onChange i dodajemy opcję mode:

var pasek = new Slider("sciezka","galka",{
   steps: s,
   mode: "vertical",
   onChange: function(step){
      $("przewijany").scrollTo(0,step*5);
   }
}).set(0);

A dokładniej odwróceniu ulegają argumenty metody scrollTo.

Żeby nie było tak nudno to dodamy jeszcze przyciski góra/dół, ale tylko z reakcją na jednokrotne kliknięcie (bez trzymania) - tworzymy dwa przyciski posiadające identyfikatory "gora" i "dol" i dodajemy do nich zdarzenia onclick. Aby zdobyć informację o aktualnym położeniu gałki korzystamy w właściwości step klasy Slider:

$("gora").addEvent("click",function(){
   pasek.set(this.step++);
});

$("dol").addEvent("click",function(){
   pasek.set(this.step--);
});

No tylko pojawia się teraz mały problem, bo przez klikanie przycisków możemy przekroczyć zakres [0, steps] - trzeba się przed tym zabezpieczyć:

$("gora").addEvent("click",function(){
   if(pasek.step > 0){
      pasek.set(pasek.step-1);
   }
});

$("dol").addEvent("click",function(){
   if(pasek.step < pasek.options.steps){
      pasek.set(pasek.step+1);
   }
});

Teraz już powinno być bezpiecznie :)

I cały powyższy kod w akcji:

PRZYKŁAD 2

W ten oto sposób przebyliśmy połowę drogi naszego dokształcania się w dziedzinie przewijania elementów :) Drugą połowę przebędziemy podczas omawiania pluginu Scroller.js ;)