JAK na vlastní scrollbar / scrollbox
Datum: 18:15 30.03.2011
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.
[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.
Autor:
Ondřej Tůma
Tweet
Discussion
Best information about meds.
Pills information for patients. What side effects?
<a href="https://smotrite-online-films.ru">buy valtrex without a prescription</a>
Everything about medicament. Get information now.
<a href="https://smotrite-online-films.ru">buy valtrex without a prescription</a>
Everything about medicament. Get information now.
In Canada 0dkwro
Medication information for patients. Short-Term Effects. <a href="https://lexapro2020.live">https://lexapro2020.live</a> Some about drug. Read information now.
Actual news about medicament.
Medicine information sheet. Generic Name.
<a href="https://артстор.рф">order promethazine pills</a>
Best news about drug. Read information now.
<a href="https://артстор.рф">order promethazine pills</a>
Best news about drug. Read information now.
1 buy u usa cheap 8g1
Medicines information leaflet. Brand names.
<a href="https://trazodone2021.top">cost of trazodone</a>
Best trends of medication. Read information now.
<a href="https://trazodone2021.top">cost of trazodone</a>
Best trends of medication. Read information now.
9 buy q usa cheap wb1
Drug information for patients. Brand names.
<a href="https://lisinopril2021.top">generic lisinopril</a>
Some what you want to know about drug. Get information here.
<a href="https://lisinopril2021.top">generic lisinopril</a>
Some what you want to know about drug. Get information here.
v buy a usa cheap 2ic
Medication information sheet. Brand names.
<a href="https://lyrica2021.top">can i order lyrica</a>
All what you want to know about medication. Get information now.
<a href="https://lyrica2021.top">can i order lyrica</a>
All what you want to know about medication. Get information now.
online no prescription y2egp
Meds information. Effects of Drug Abuse. <a href="https://lyrica2020.top">order cheap lyrica without dr prescription</a> Best trends of drugs. Read information here.
online no prescription hguqh
Meds prescribing information. What side effects? <a href="https://prednisone.site">prednisone no prescription</a> Some information about medicament. Get information here.
online no prescription 4f7nq
Medicament information for patients. Short-Term Effects. <a href="https://zoloft2020.life">cost of zoloft pill</a> Actual what you want to know about pills. Read now.
In the USA z9715d
Pills information for patients. What side effects? <a href="https://doxycyclineph.life">https://doxycyclineph.life</a> Best about drugs. Get here.
Your comment:
© 2024 Ondřej Tůma McBig. Ondřej Tůma | Based on: Morias | Twitter: mcbig_cz | RSS: články, twitter