Tipy: jQuery Scrollable() – Set init position

Dátum: 9.1.2010

Nedávno som implementoval jQuery do jedného produktu a stretol som sa s problémom, ako nastaviť pozíciu na začiatku pri použití Scrollable fcie. Problém bol ten, že som scrollable použil ako javascriptový __doPostback() v ASPX aplikácii a po postbacku som si potreboval „nalistovať“ kliknutú stránku.

Na Internete som rýchlo odpoveď nenašiel, tak som začal lúštiť kód, výsledok možno niekomu pomôže.

V prvom rade musíme zavolať scrollable s vlastnou konfiguráciou, zameráme sa na parameter api:

$("div.scrollable").scrollable({ api:true })

Postupoval som podľa príkladu:

http://flowplayer.org/tools/demos/scrollable/

Len som si prispôsobil scrollable z obrázkov na UL apod. (pozri priložený CSS). Nájdeme tento element a aplikujeme fciu scrollable (ja som použil jquery.tools 1.1.2, attachol som priamo JS (neťahal som z google):

Stiahnúť sa dá napríklad tu (s doplnkom Scrollable):

http://flowplayer.org/tools/download.html

Parameter api spôsobí to, že fcia scrollable vráti api rozhranie scrollable objektu (nie element). Vďaka tomu vieme zavolať fciu scrollTo():

var scroll = $("div.scrollable").scrollable({ api:true });

scroll.seekTo(12);

Parametrom seekTo() je index položky, ktorou chceme začať zobrazenie. Nevýhodou v príklade je, že pri renderovaní je vždy efekt animácie, ktorý podľa mňa je žiadúci až po vyrenderovaní a kliknutí na navigačné tlačidlo. Potlačenie animácie vieme urobiť tak, že scrollable nastavíme nulovú rýchlosť, nastavíme položku a až potom nastavíme panelu rýchlosť, ktorú požadujeme.

V mojom príklade som ešte potreboval zamedziť scrollovanie po kliknutí na položku, jednak preto, že kliknutie spôsobilo PostBack, ale aj preto, že tento efekt je aktívny aj pre disablované položky. Na to slúži atribút konfigurácie clickable:

//<![CDATA[

$(function()

{

var scroll = $("div.scrollable").scrollable({ clickable:false, speed:0, api:true });