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 8177×

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ů

1.12.2016 22:13 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 8. prosince od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Sraz bude tentokrát tématický. Bude retro! K vidění budou přístroje jako Psion 5mx nebo Palm Z22. Ze svobodného hardwaru pak Openmoko nebo čtečka WikiReader. Přijďte se i vy pochlubit svými legendami, nebo alespoň na pivo. Moderní hardware má vstup samozřejmě také povolen.
Komentářů: 1

4.9.2016 20:13 /Pavel `Goldenfish' Kysilka
PR: Dne 22.9.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í, provozování ERP v cloudu, o hostování různých typů softwaru, ale třeba i o zálohování dat nabízeném podnikům formou služby.
Přidat komentář

1.9.2016 11:27 /Honza Javorek
Česká konference o Pythonu, PyCon CZ, stále hledá přednášející skrz dobrovolné přihlášky. Máte-li zajímavé téma, neváhejte a zkuste jej přihlásit, uzávěrka je již 12. září. Konference letos přijímá i přednášky v češtině a nabízí pomoc s přípravou začínajícím speakerům. Řečníci mají navíc vstup zadarmo! Více na webu.
Přidat komentář

27.8.2016 8:55 /Delujek
Dnes po 4 letech komunitního vývoje vyšla diaspora 0.6.0.0
diaspora* je open-source, distribuovaná sociální síť s důrazem na soukromý
Více v oficiálním blog-postu
Přidat komentář

24.8.2016 6:44 /Ondřej Čečák
Poslední týden CFP LinuxDays 2016; pokud byste rádi přednášeli na LinuxDays 2016 8. a 9. října v Praze, můžete svůj příspěvek přihlásit, následovat bude veřejné hlasování.
Přidat komentář

9.8.2016 22:56 /Petr Ježek
Zařazení souborového systému reiser4 do jádra 4.7 znamená konečně konec patchování jádra jen kvůli možnosti použít reiser4.
Přidat komentář

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

11.7.2016 16:53 /Redakce Linuxsoft.cz
Konference LinuxDays hledá přednášející. Přihlášky poběží do konce prázdnin, v září bude hlasování a program. Více na https://www.linuxdays.cz/2016/cfp/.
Přidat komentář

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

> Poslední diskuze

10.12.2016 11:01 / jeorge
kitchen designer

7.12.2016 8:10 / Hamon
scottish cottages

4.12.2016 22:54 / František Kučera
Dárek

9.11.2016 7:42 / Mane
hardwood floor waxing

8.11.2016 13:38 / Mira
Konfigurace maldet na Centos serveru

Více ...

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