j-Layout2

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Tato složka je velmi jednoduchá ve srovnání s j-Layout.

Konfigurace:

parent {String} může obsahovat parent, window nebo jQuery selektor pro metodu closest (předvolený: window)
margin {Číslo} přidává marže pro height (předvolený: 0)
autoresize {Boolean} umožňuje automatické rezize (předvolené: true)

Metody:

IMPORTANT component.show(type) může zobrazit konkrétní panel pro mobilní zařízení, type může být left, right nebo main
component.resizescrollbar(panel_type) přehráva skříňku pro konkrétní panel
component.scrolltop(panel_type) skříní na vrcholu pro konkrétní panel

Panelové typy:

left levý panel
right pravý panel
top vrcholový panel (je to panel na vrcholu všech panelů)
Top panel top2 a používá klíč top v konfiguraci (je mezi panelem left a right)
bottom spodní panel (je to panel na dně všech panelů)
bottom2 spodní panel a používá klíč bottom v konfiguraci (je mezi left a right panel)
main hlavní obsah

Layout:

Vytvoření layoutu je velmi snadné.

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

Atributy:

data-type musí obsahovat typ sekce top, top2, left, right, bottom, bottom2 nebo main
data-size obsahuje velikost sekce LG,MD,SM,XS -> v pixlech nebo procentech, například: 200,200,200,0 (0 znamená skryté) nebo 20% (všechny hodnoty budou dědit 20%)
data-scrollbar="margin:50;visible:1" umožňuje scrollbar, možné hodnoty:
- selector {String} volitelný jQuery selektor pro skříňový kontejner
- margin {Číslo} scrollbar marže (předvolené: 0)
- visible {Boolean} zobrazuje scrollbar

Dobré vědět:

Každý panel je prvek section a musí obsahovat atribut data-type="top" s typem panelu
Určete pouze panely, které budete používat
Objednávka všech prvků section není důležitá

Použijte ji s <ui-component name="layout2">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>