j-Layout

• Tento komponent môže vytvoriť rozloženie vášho SPA. Tento komponent je trochu náročnejší na pochopenie, ale je veľmi užitočný. j-Layout používa jComponent +v17.

Konfigurácia:

• parent {String} môže obsahovať parent, window alebo jQuery selektor pre metódu closest (predvolené: window)
• margin {Number} pridáva maržu pre height (predvolené: 0)
• remember {Boolean} si pamätá posledné nastavenia rozloženia pre zmenu veľkosti (predvolené: true)
• space {Number} interné, obsahuje medzeru medzi panelmi (predvolené: 1)
• border {Number} interné, obsahuje veľkosť okraja (predvolené: 0)
• resize {String} interné, cesta k metóde, ktorá sa vykoná pri zmene veľkosti rozloženia
• autoresize {Boolean} umožňuje automatickú zmenu veľkosti (predvolené: true)

Metódy:

• component.refresh() obnovuje rozloženie
• component.resize() vykoná zmenu veľkosti
• component.reset() vykoná reset zmeny veľkosti
• component.layout(name) mení rozloženie (ako obojsmerná dátová väzba)
• component.rebind(code_string) vytvára novú konfiguráciu rozloženia
• component.lock(type, [boolean]) uzamkne panel

Typy panelov:

• left ľavý panel, nastaviteľná veľkosť
• Pravý panel right s možnosťou zmeny veľkosti
• Pravý panel right2 bude vedľa ľavého panela a v konfigurácii používa kľúč right s možnosťou zmeny veľkosti
• top horný panel, nastaviteľná veľkosť (je to panel na vrchu všetkých panelov)
• horný panel top2, nastaviteľná veľkosť a v konfigurácii používa kľúč top (je medzi panelom left a right)
• Spodný panel bottom s možnosťou zmeny veľkosti (je to panel na spodnej strane všetkých panelov)
• Spodný panel bottom2, nastaviteľná veľkosť a v konfigurácii používa kľúč bottom (je medzi panelom left a right)
• Hlavný panel main, nemožno meniť veľkosť a veľkosť sa počíta automaticky

Rozloženie:

Vytvorenie rozloženia je veľmi jednoduché a s množstvom možností. Layout musí mať vlastnú HTML štruktúru. Pozrite sa na príklad. Nižšie uvedený príklad popisuje iba metadáta rozloženia.

• size {Number/String} môže obsahovať výšku/šírku panelu podľa typu panelu. Číslo 120 definuje pixely a reťazec 100% môže definovať percento
• minsize {Number/String} je minimálna veľkosť panela pri zmene veľkosti panelu (predvolené: hodnota size)
• maxsize {Number/String} je maximálna veľkosť panela pri zmene veľkosti panelu (predvolené: automatické počítanie)
• resize {Boolean} umožňuje zmenu veľkosti panelu okrem panelu main (počíta sa automaticky)
• show {Boolean} umožňuje viditeľnosť (predvolené: false)

{
	top: { size: 80, resize: true, minsize: 50 }, // top panel
	right: { size: 100 },
	bottom: { size: 100 }, // bottom panel
	left: { size: 100, resize: true }, // left panel
	main: {}, // main panel

	// Can contain a different template for various display types
	// lg = Large display, md = Medium display, sm = Small display, xs = Extra small display
	md: {
		top: { show: true, size: 80 },
		bottom: { show: false },
		left: { show: false },
		main: { show: true }
	},

	// Custom layouts
	detail: {

		// Custom display types in custom layouts
		md: {
			top: { show: true },
			bottom: { show: true },
			main: { show: true },
			left: { show: false },
			right: { show: true, size: 300 }
		},
		xs: {
			top: { show: true },
			bottom: { show: true },
			main: { show: false },
			left: { show: false },
			right: { show: true, size: '100%' }
		}
	}
}

Je dobré vedieť:

• DÔLEŽITÉ: tento komponent musí obsahovať metaúdaje rozloženia zabalené do <script type="text/plain"></script>
• 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é
• top2 používa konfiguračný kľúč top
• right2 používa konfiguračný kľúč right
• bottom2 používa konfiguračný kľúč bottom

Použite ho so <ui-component name="layout">. 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.

<style>
	.ui-layout-section { font-size: 11px; }
</style>

<div style="width:500px;height:300px">
	<ui-component name="layout" path="mylayout" config="parent:parent" class="invisible">

		<!-- META DATA OF THE LAYOUT -->
		<!-- VERY IMPORTANT -->
		<script type="text/plain">
			{
				top: { size: 80, resize: true },
				bottom: { size: 100 },
				left: { size: 100, minsize: 50, resize: true },
				right: { size: 100 },
				main: {},
				detail: {
					left: { show: false },
					right: { show: true, size: '100%' },
					bottom: { show: false },
					main: { show: false }
				}
			}
		</script>

		<!-- PANEL IN LAYOUT -->
		<section data-type="top">
			TOP
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="main">
			MAIN
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="right">
			RIGHT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="left">
			LEFT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="bottom">
			BOTTOM
		</section>

	</ui-component>
</div>

<br />

<div style="width:500px;height:300px">
	<ui-component name="layout" config="parent:parent" class="invisible">
		<script type="text/plain">
			{
				top: { size: 80, resize: 1 },
				bottom: { size: 100 },
				left: { size: 100 },
				right: { size: 100 },
				main: {}
			}
		</script>

		<section data-type="top2">
			TOP2
		</section>

		<section data-type="main">
			MAIN
		</section>

		<section data-type="right">
			RIGHT
		</section>

		<section data-type="left">
			LEFT
		</section>

		<section data-type="bottom2">
			BOTTOM2
		</section>

	</ui-component>
</div>

<script>

	var mylayout = '';

	setInterval(function() {
		SET('mylayout', mylayout === 'detail' ? '' : 'detail');
	}, 5000);

	setInterval(function() {
		SETTER('layout', 'lock', 'right');
	}, 8000);

</script>