j-Scrollbar

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Vlastné posuvníky. DÔLEŽITÉ: Zabalí aktuálny obsah pridaním dvoch vnorených prvkov div s pozíciou relative. Funguje iba so jComponent v17.

Konfigurácia:

Selektor {String} parent pre nadradený prvok, môže obsahovať window (predvolené: undefined)
visibleX {Boolean} vždy zobrazuje vodorovný posuvník (predvolené: false)
visibleY {Boolean} vždy zobrazuje vertikálny posuvník (predvolené: false)
offset {Boolean} pridá offset.top tohto prvku (predvolené: false)
reset {Boolean} resetuje polohu, ak sa zmení path (predvolené: true)
margin {číslo} okraj pre všetky typy displejov (predvolené: 0)
marginxs {číslo} okraj pre zobrazenia XS (predvolené: 0)
marginsm {číslo} marža pre displeje SM (predvolené: 0)
marginmd {číslo} okraj pre zobrazenia MD (predvolené: 0)
marginlg {číslo} okraj pre zobrazenia LG (predvolené: 0)
track {String} môže sledovať len definované cesty napr. FIELD1,FIELD2,FIELD3, cesty budú prepojené s component.path

Metódy:

component.reset() resetuje polohu na 0,0
component.scrollleft(val) zvitky X
component.scrolltop(val) zvitky Y
component.scrollright(val) roluje X z pravej strany
component.scrollbottom(val) roluje Y zo spodnej strany
component.scroll(x, y) roluje X,Y
component.resize() zmení veľkosť kontajnera (automaticky reaguje na udalosti resize)

Použite ho so <ui-component name="scrollbar">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

example.html

<ui-component name="scrollbar" style="background-color:rgba(100,100,100,0.05);height:200px;width:300px" class="hidden" data-jc-class="hidden">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</ui-component>