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

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ů

5.3.2017 19:12 /Redakce Linuxsoft.cz
PR: 23. března proběhne v Praze konferenci na téma Cloud computing v praxi. Hlavními tématy jsou: Nejžhavější trendy v oblasti cloudu a cloudových řešení, Moderní cloudové služby, Infrastruktura současných cloudů, Efektivní využití cloudu, Nástrahy cloudových řešení a jak se jim vyhnout.
Přidat komentář

27.2.2017 22:12 /František Kučera
Pozvánka na 137. sraz OpenAlt – Praha: Tentokrát jsme si pro vás připravili neobvyklou akci. Ve středu 1.3. v 17:30 nás přivítá sdružení CZ.NIC ve svých prostorách v Milešovské ulici číslo 5 na Praze 3, kde si pro nás připravili krátkou prezentaci jejich činnosti. Následně navštívíme jejich datacentrum pod Žižkovskou věží. Provedou nás prostory, které jsou běžnému smrtelníkovi nedostupné!
Po ukončení prohlídky se všchni odebereme do hostince U vodoucha, Jagelonská 21, Praha 3 pochutnat si na některém z vybraných piv či dát si něco na zub. Rezervaci máme od 19:30, heslo je OpenAlt.
Ale pozor! Do prostor datového centra máme omezený přístup, dostane se tam pouze 10 lidí! Takže kdo přijde dříve, ten má přednost, a občanky s sebou! Kdo nebude chtít na prohlídku datového centra, může se pomalu přesunout do hostince U vodoucha a u nepřeberné nabídky piv počkat na ostatní.
Přidat komentář

18.1.2017 0:49 /František Kučera
Členové a příznivci spolku OpenAlt se pravidelně schází v Praze a Brně. Fotky z pražských srazů za uplynulý rok si můžete prohlédnout na stránkách spolku. Příští sraz se koná už 19. ledna – tentokrát je tématem ergonomie ovládání počítače – tzn. klávesnice, myši a další zařízení. Také budete mít příležitost si prohlédnout pražský hackerspace Brmlab.
Přidat komentář

8.1.2017 17:51 /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 19. ledna od 18:30 v pražském hackerspacu Brmlab. Tentokrát je tématem srazu ergonomie ovládání počítače – tzn. klávesnice, myši a další zařízení. K vidění bude mechanická klávesnice dasKeyboard, trackball Logitech nebo grafický tablet (a velký touchpad) Wacom. Přineste i vy ukázat svoje zajímavé klávesnice a další HW. V 18:20 je sraz před budovou, v 18:30 jdeme společně dovnitř, je tedy dobré přijít včas. Podle zájmu se později přesuneme do nějaké restaurace v okolí.
Přidat komentář

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ář

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

> Poslední diskuze

24.3.2017 11:54 / Hui
country cottages

16.3.2017 16:33 / BezvaDesign.cz
Re: Hledám grafika do teamu

9.3.2017 11:44 / Jaromir Obr
Re: chyba

18.1.2017 20:18 / martin horky
Spolupraca linuxu a microsoftu

17.1.2017 9:57 / Pavel Hrubeš
Re: Externí USB televizní karta

Více ...

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