j-Layout2

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

Tento komponent je oveľa jednoduchý komponent v porovnaní so j-Layout.

Konfigurácia:

parent {String} môže obsahovať parent, window alebo selektor jQuery pre metódu closest (predvolené: window)
margin {číslo} pridáva maržu pre height (predvolené: 0)
autoresize {Boolean} umožňuje automatickú zmenu veľkosti (predvolené: true)

Metódy:

IMPORTANT component.show(type) môže zobrazovať špecifický panel pre mobilné zariadenia, type môže byť left, right alebo main
component.resizescrollbar(panel_type) zmení veľkosť posúvača pre konkrétny panel
component.scrolltop(panel_type) sa posúva nahor pre konkrétny panel

Typy panelov:

left ľavý panel
Pravý panel right
top horný panel (je to panel na vrchu všetkých panelov)
horný panel top2 a v konfigurácii používa kľúč top (je medzi panelom left a right)
spodný panel bottom (je to panel v spodnej časti všetkých panelov)
spodný panel bottom2 a v konfigurácii používa kľúč bottom (je medzi panelom left a right)
hlavný obsah main

Rozloženie:

Vytvorenie rozloženia je veľmi jednoduché.

<div data-type="" data-size="" data-scrollbar=""></div>

Atribúty:

data-type musí obsahovať typ sekcie top, top2, left, right, bottom, bottom2 alebo main
data-size obsahuje veľkosť sekcie LG,MD,SM,XS --> v pixeloch alebo percentoch, napríklad: 200,200,200,0 (0 znamená skryté) alebo 20% (všetky hodnoty budú zdedené 20%)
data-scrollbar="margin:50;visible:1" umožňuje scrollbar, možné hodnoty:
- selector {String} voliteľný, jQuery selektor pre skrutkovač
- margin {Číslo} scrollbar margin (predvolené: 0)
- visible {Boolean} ukazuje scrollbar

Je dobré vedieť:

každý panel je prvkom section a musí obsahovať atribút data-type="top" s typom panelu
definujte len panely, ktoré budete používať
poradie všetkých prvkov section nie je dôležité

Použite ho so <ui-component name="layout2">. 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="layout2" config="parent:window" class="invisible">
	<div data-type="top" data-size="44" style="background-color:red">
		TOP
	</div>
	<div data-type="bottom2" data-size="44" style="background-color:blue">
		BOTTOM
	</div>
	<div data-type="left" data-size="20%,20%,20%,0" style="background-color:green">
		LEFT
	</div>
	<div data-type="right" data-size="20%,20%,20%,0" style="background-color:purple">
		RIGHT
	</div>
	<div data-type="main" data-scrollbar="visible:true" style="background-color:#F0F0F0">
	</div>
</ui-component>