j-ViewBox

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

udržiava pevnú percentuálnu výšku
skvelé využitie pre intranetové aplikácie
podporuje releasing

Konfigurácia:

height {Number} percento výšky
disabled {Boolean} voliteľné, môže zakázať obsah s vrstvou
parent {String} voliteľné, kontajner s pevnou výškou, môže byť window. Predvolená hodnota: Prvok parent.
minheight {Number} minimálna výška v pixeloch (predvolené: 0 - vypnuté)
scroll {Boolean} umožňuje vertikálne posúvanie (predvolené: false - vypnuté)
scrollbar {Boolean/String} zobrazuje posuvník (predvolené: true alebo new: native)
delay {Number} msec. znova zmení veľkosť poľa, ak sa hodnota zmení podľa cesty (predvolené: 100)
visibleY {Boolean} stále zobrazuje posúvač Y (predvolené: false)
visibleX {Boolean} stále zobrazuje posuvník X (predvolené: false)
scrollto {String} sa automaticky posunie nahor/nadol, ak sa zmení path (predvolené: EMPTY, môže byť top alebo bottom)
margin {Number} voliteľné, horný/dolný okraj spolu (podporuje auto, ktorý sa počíta od offset.top, predvolené: 0)
marginxs {Number} voliteľné, horný/dolný okraj spolu pre šírku obrazovky xs
marginsm voliteľné, horný/dolný okraj spolu pre šírku obrazovky sm
marginmd voliteľné, horný/dolný okraj spolu pre šírku obrazovky md
marginlg voliteľné, horný/dolný okraj spolu pre šírku obrazovky lg
invisible {Boolean}, ak true, potom zobrazovacie pole nastaví triedu invisible pri vykresľovaní (predvolené: true)
scrollbarshadow {Boolean} ak true, potom budú vlastné posuvníky obsahovať zvislý tieň (predvolené: false)
initdelay {Number} odstráni triedu inivisible po určenom čase (predvolené: 250 ms)
centered {Boolean} umožňuje vertikálne a horizontálne centrovanie obsahu (predvolené: false)
Oneskorenie resizedelay {Number} pre zmenu veľkosti (predvolené: 200)
NEW: togglescrolled {String} selektor DOM pre nadradené prvky (pri rolovaní zobrazovacieho poľa pridáva triedu ui-viewbox-scrolled)

Metódy:

component.scrolltop(val) zvitky Y
component.scrollbottom(val) roluje Y zo spodnej strany
component.resize() zmení veľkosť kontajnera (automaticky reaguje na udalosti resize)
component.resizescrollbar() mení veľkosť vlastného posúvača (zamerané na špeciálne prípady)

Použite ho so <ui-component name="viewbox">. 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="viewbox" config="height:30;parent:window" style="background-color:#F5F5F5">
	Always 30%
</ui-component>
<ui-component name="viewbox" config="height:70;parent:window" style="background-color:#E0E0E0">
	Always 70%
</ui-component>