LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> 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.

9.5.2011 00:00 | Ondřej Tůma | Články autora | přečteno 7646×

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.

Přílohy

scroll.js - application/javascript
scrollbar.zip - application/zip

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

8.5.2016 17:19 /Redakce Linuxsoft.cz
PR: Dne 26.5.2016 proběhne v Praze konference Cloud computing v praxi. Tématy bude např. nejnovější trendy v oblasti cloudu a cloudových řešení, cloudové služby, infrastruktura cloudu, efektivní využití cloudu, možné nástrahy cloudů a jak se jim vyhnout
Přidat komentář

21.4.2016 8:01 /František Kučera
Spolek OpenAlt zve na 127. distribuovaný sraz příznivců svobodného softwaru a otevřených technologií (hardware, 3D tisk, SDR, DIY, makers…), který se bude konat ve čtvrtek 28. dubna od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

2.3.2016 22:41 /Ondřej Čečák
Letošní ročník konference InstallFest již tento víkend!
Přidat komentář

14.2.2016 16:39 /Redakce Linuxsoft.cz
O víkendu 5. a 6. března 2016 proběhne na pražském Strahově 8. ročník tradiční konference InstallFest. Celkem za dva dny uvidíte ​30 přednášek​ a ​6 workshopů.
Přidat komentář

5.2.2016 17:38 /Petr Ježek
Utilitka z XFce "xfce4-power-manager" nejen umožňuje nastavení lhůty pro uspání či hybernaci, ale i zapínání a vypínání prezentačního módu pro nerušené sledování videí. Stačí ji nastavit v každém vybavenějším panelu a v jakémkoli nontiled WM/DE.
Přidat komentář

10.1.2016 11:32 /Pavel `Goldenfish' Kysilka
LinuxMarket změnil provozovatele. Nově jej provozuje Marek Pszczolka. Více info a detaily #1 a #2.
Přidat komentář

29.12.2015 11:38 /Ondřej Čečák
Ještě posledních pár dní můžete přidávat příspěvky nebo nápady na Install Fest 2016, který se bude konat 5. a 6. března 2016.
Přidat komentář

8.12.2015 11:36 /Petr Ježek
Logické se stává realitou. LibreOffice a Thunderbird se mají dle článku na Redditu stát protiváhou MS řešení (MS Office a Outlook).
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

7.5.2016 14:58 / Teodor Komárek
Soubory

20.4.2016 0:07 / Jakub Cleing
Sázkový panel PHP FUSION

9.4.2016 9:43 / jiwopene@gmail.com
Re: problém s dpkg a nemožností instalovat

9.4.2016 9:41 / jiwopene@gmail.com
Re: změna velikosti disk.oddílu

9.4.2016 9:40 / jiwopene@gmail.com
Re: Přenesení starého OS Win7 na virtuál v Debianu

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2016) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze