Mootools 1.1 - SmoothScroll.js
20 sierpnia, 2007
Plugin smoothscroll.js to chyba najprostszy składnik sekcji plugins - zawiera klasę, która nie posiada żadnych metod, które możemy użyć. Użycie klasy SmoothScroll sprowadza się do jej inicjalizacji.
Służy ona do łatwego stworzenia efektu przewijania dokumentu przy naciśnięciu kotwicy (czyli linka prowadzącego do innego miejsca w tym samym dokumencie).
Jedynym argumentem pobieranym przez tą klasę jest obiekt opcji, które dziedziczy ona po klasie Fx.Scroll. Dodatkowo posiada ona jedną opcję własną - links, która jest ciągiem znaków odpowiadającym selektorowi CSS. Opcji links używamy w momencie, gdy chcemy zdecydować, które kotwice mają przewijać się płynnie do miejsca docelowego. Domyślnie klasa SmoothScroll przypisuje ten efekt, do wszystkich kotwic w dokumencie.
Pozwolę sobie zaprezentować dwa przykłady - jeden w którym wszystkie kotwice będą płynnie przewijały dokument i drugi w którym efekt ten wystąpi tylko na określonych kotwicach.
Składnia klasy SmoothScroll wygląda następująco:
new SmoothScroll({opcje});
A dodanie efektu do wszystkich linków w dokumencie wymaga tylko zapisu:
new SmoothScroll();
Oczywiście kod ten umieszczamy w zdarzeniu onload obiektu window.
I zaprezentowany kod w akcji:
A teraz sprawimy, że efekt przewijania pojawi się tylko w wypadku linków należących do klasy efekt:
new SmoothScroll({links: "a.efekt"});
Zmiany można obejrzeć w poniższym przykładzie (płynnie przewijają się linki do drugiego i czwartego paragrafu ):
I tym sposobem omówiliśmy ten prościutki, ale według mnie przydatny plugin :)
W kolejnej części kursu opiszę plugin slider.js .
Komentarze do wpisu "Mootools 1.1 - SmoothScroll.js":
1.
plejeru napisał(a):
20 sierpnia 2007, 16:43:18
hm, ja w tym kompletnie zielony, ale mi się podoba.
zaglądam w kod przykładu i tego „window.addEvent(„load”,function(){” nie widzę... jak rozumiem to jest w drugim pliku .js podlinkowane przez <script src=”„> tak?
2.
Dziudek napisał(a):
20 sierpnia 2007, 16:44:50
@plejeru – tak kod JavaScript jest w pliku mootools-1.js (w przypadku pierwszego przykładu) i w pliku mootools-2.js (drugi przykład) ;)
3.
plejeru napisał(a):
20 sierpnia 2007, 16:47:06
no to wszystko rozumiem, na nowym 7 kettles się takie cuda pojawią :)
4.
Dziudek napisał(a):
20 sierpnia 2007, 16:48:16
@plejeru – no ja osobiście bardzo lubię efekt miękkiego przewijania, bo zwykłe przenoszenie jest dla mnie takie dość drażniące, a pół sekundy animacji nikogo nie zbawi :D
5.
drivex napisał(a):
20 sierpnia 2007, 18:56:15
Bardzo fajne, jakby Ci sie kiedys zachcialo wrzucic wszystko do PDFa albo nawet ZIPa podzielonego na dzialy to by super bylo :)
6.
Dziudek napisał(a):
20 sierpnia 2007, 18:58:21
@drivex – nie wiem czy mi życia starczy xD Jak ktoś bardzo będzie chciał to mogę udostępnić wersję Google Docs gdzie mam każdy wpis oddzielnie ;)
7.
drivex napisał(a):
20 sierpnia 2007, 18:58:47
To udostepnij ;) Ja sobie posciagam :)
8.
plejeru napisał(a):
20 sierpnia 2007, 18:59:47
o, ja tez :D
9.
Dziudek napisał(a):
20 sierpnia 2007, 19:00:52
@drivex, plejeru – hmm ok, ale po ukończeniu kursu i lekkim formatowaniu :) Bo tam wersja plain text w sumie jest, a czasami jest kod html Joggera ;] Także musicie poczekać ze dwa tygodnie, bo jutro wyjeżdżam na tydzień ;]
Chyba, że Was niesformatowana wersja interesuje ;D
10.
drivex napisał(a):
20 sierpnia 2007, 19:01:39
mnie sie nie spieszy ale pamietaj o Nas ;)
11.
plejeru napisał(a):
20 sierpnia 2007, 19:01:40
aż tak się nie pali, ja mogę poczekać ;)
12.
Dziudek napisał(a):
20 sierpnia 2007, 19:02:17
Ok ;) Karteczka z przypomnieniem ląduje na monitorze ;)
13.
sil napisał(a):
22 stycznia 2009, 21:29:29
mam pytanie, jak przerobić ten kod żeby przewijało się do kotwicy ale np o 100px wyżej od kotwicy
— odrazu zaznacze że wpisanie samej kotwicy wyżej nie wchodzi w grre ;] —-
Dodaj komentarz: