j-Layout

• Tato složka může vytvořit rozložení pro váš SPA. Tento složka je trochu obtížnější pochopit, ale je velmi užitečná. j-Layout používá jComponent +v17.

Konfigurace:

• parent {String} může obsahovat parent, window nebo jQuery selektor pro metodu closest (předvolený: window)
• margin {Number} přidává marže pro height (předvolený: 0)
• remember {Boolean} si může pamatovat poslední nastavení rozložení pro resing (předvolené: true)
• Vnitřní space {Number} obsahuje prostor mezi panely (předběžně: 1)
• border {Number} vnitřní, obsahuje hraniční velikost (default: 0)
• resize {String} interní, cesta k metodu, která je spuštěna, když je rozložení přehodnoceno
• autoresize {Boolean} umožňuje automatickou rezidui (předvolené: true)

Metody:

• component.refresh() vyčerpání
• component.resize() se vyskytuje
• component.reset() provádí resetování
• component.layout(name) mění rozložení (jako dvě způsoby datového připojení)
• component.rebind(code_string) vytvoří novou konfiguraci
• component.lock(type, [boolean]) uzavírá panel

Panelové typy:

• left levý panel, recyklovatelný
• right pravý panel, recyklovatelný
• right2 pravý panel bude vedle levého panelu a používá klíč right v konfiguraci, recyklovatelný
• top vrchní panel, recyklovatelný (je to panel na vrcholu všech panelů)
• Top panel top2, recyklovatelný a používá klíč top v konfiguraci (je mezi panelem left a right)
• bottom spodní panel, recyklovatelný (je to panel na dně všech panelů)
• bottom2 spodní panel, recyklovatelný a používá klíč bottom v konfiguraci (je mezi left a right panel)
• Hlavní panel main, can't be resizable a velikost se počítá automaticky

Layout:

Vytvoření rozložení je velmi snadné a s mnoha možností. Rozložení musí mít vlastní strukturu HTML. Podívejte se na příklad.

• size {Number/String} může obsahovat výšku / šířku panelu podle typu panelu. číslo 120 definuje pixely a String 100% může definovat procento
• minsize {Number/String} je minimální velikost panelu, zatímco panel se rezační (předvolená hodnota size)
• maxsize {Number/String} je maximální velikost panelu, zatímco panel se rezační (podmínkou: automaticky počítaný)
• resize {Boolean} umožňuje resing panelu s výjimkou panelu main (to se počítá automaticky)
• show {Boolean} umožňuje viditelnost (předvolené: 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%' }
		}
	}
}

Dobré vědět:

• IMPORTANT: Tato složka musí obsahovat meta-data rozložení v <script type="text/plain"></script>
• 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á
• top2 používá klíč konfigurace top
• right2 používá klíč konfigurace right
• bottom2 používá klíč konfigurace bottom

Použijte ji s <ui-component name="layout">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.

<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>