JAK na vlastní scrollbar / scrollbox

V následujícím článku představím vlastní implementaci scrollbaru v JavaScriptu, která je stejně jako animované menu použita na webu babybox.cz. Protože scrollbar jako takový vlastně sám o sobě nic nedokáže, tak budeme raději mluvit o scrollboxu. Tedy gui prvku (widgetu), který obsahuje jak samostatný scrollbar, tak oblast, která je tímto scrollbarem ovládána.

V minulých článcích jsme využívali knihovnu JAK. Ne jinak tomu bude i v tomto případě. Navíc použijeme jeden z hotových grafických JAK prvků: slider. Definici slideru naleznete v souboru slider.js, resp. slider_compressed.js. Jeho použití je jednoduché, jen je třeba myslet na všechny možné konfigurační hodnoty. Těmi nastavujeme mód, horizontální nebo vertikální, rozměry slideru a jezdce, rozsah hodnot, které slider generuje a css třídu kterou slideru nastavujeme požadovaný vzhled. Ukázky použítí a konfigurace naleznete na stránkách JAKu. Pro naše účely vytvoříme slider, tedy scrollbar takto:

// vytvorime prvek slider
var scrollbar = new JAK.Slider(
        "scrollbar",{                         // id div prvku
            mainSliderClassName: 'buttonSlider', // css třída scrollbaru
            mode: 'vertical',
            min: 0,                         // minimální hodnota
                                 // max je implicitně 100
            width: 13,
            height: 355,
            riderW: 18,
            riderH: 19
        });

Ukázka javascriptového slideru.

Tento scrollbar umístíme nalevo nebo napravo od prvku, který bude scrollovaný, tedy umístíme tam příslušné dom objekty (div). Scrollbox předpokládá, že bude ovládán sliderem s hodnotamy 0 - 100, resp. 100-0 (protože slider roste směrem nahoru, což je pro všechny ostatní použití logické). Při jeho vytvoření je nutné mu ještě v parametrech konstruktoru předat prvek box, ten je obalem s pevnou výškou a prvek content, tedy obsah který bude scrollbarem scrollován. Vytvoření vypadá například takto:

// vytvorime prvek scrollbox
var scrollbox = new ScrollBox(
        JAK.gel('page'),       // pevny obal scrollboxe
        JAK.gel('content'),    // scrollovatelny obsah
        scrollbar,             // scrollbar který scrollbox ovládá
        0);                    // vychozi nascrollovani

Implementace scrollboxu, tak jak ji přikládám k článku obsahuje algoritmus na zjištění, zda se content do boxu vejde, a podle toho zobrazí nebo skryje scrollbar sám. Dále odchytává všechny důležité události uvnitř boxu, takže se chová tak, jak by uživatel očekával.

Vytvořený objekt scrollboxu má jednu veřejnou metodu, a tou je reload, která umožňuje obnovit scrollbox při změně, a dokáže nascrollovat content prvek na zvolená procenta 0 - 100.

Implementace rozhodně není dokonalá a má mnoho nedostatků, které si ovšem laskavý čtenář jistě sám opraví. Jak už je zvykem, kód v souboru scroll.html a scroll.js prezentuji pod BSD licencí. Prostor pro vylepšení sem rozhodně zanechal a doufám že využijete i prostor pro diskuzi pod článkem.

[Doplněno 31. 3. 2011]
Samostatně připojený soubor scroll.js obsahuje okomentovanou a nepatrně opravenou verzi ScrollBoxu a nově i implementaci ScrollListu, ta již není ovládána scrollbarem, ale pouze dvěma tlačítky, šipkami nahoru a dolu.

[Doplněno 29. 4. 2011]
Přidal sem obrázek s náhledem takového javascritového slideru.
Author:

Discussion

Your comment:

© 2019 Ondřej Tůma McBig. Ondřej Tůma | Based on: Morias | Twitter: mcbig_cz | RSS: articles, twitter