j-Layout

• Ez az összetevő létrehozhat egy elrendezést a SPA. Ez a komponens kissé nehezebb megérteni, de nagyon hasznos. j-Layout használja jComponent +v17.

konfiguráció:

• parent {String} Tartalmazhat parent, window vagy jQuery kiválasztó a closest Az alapértelmezett módszer (default window)
• A margin {Number} hozzáadja a height marginját (default: 0)
• A remember {Boolean} emlékezhet az újratelepítés utolsó beállításaira (például: true)
• space {Number} belső, tartalmaz egy helyet a panelek között (default: 1)
• border {Number} belső, tartalmaz egy határméret (default: 0)
• resize {String} belső, a módszerhez vezető út, amelyet az elrendezés átalakításakor hajtanak végre
• A autoresize {Boolean} automatikus méréshez vezet (default: true)

módszerek:

• component.refresh() frissítés
• A component.resize() újraindul
• A component.reset() újraindítja az újratelepítést
• component.layout(name) változtat egy elrendezést (mint két módon adatkötés)
• A component.rebind(code_string) új layout konfigurációt készít
• A component.lock(type, [boolean]) zárja be a panelet

Panel típusok:

• left bal panel, újrahasznosítható
• right jobb panel, újrahasznosítható
• A right2 jobb panel a bal oldalon lesz, és a right kulcsot használja a konfigurációban.
• top felső panel, újrahasznosítható (az összes panel tetején található)
• top2 felső panel, újrahasznosítható és a konfigurációban a top kulcsot használja (a left és a right panel között van)
• bottom alsó panel, újrahasznosítható (az összes panel alsó részén található)
• bottom2 alsó panel, újrahasznosítható és használja a bottom kulcsot a konfigurációban (ez között left és right panel)
• main főpanel, nem lehet újrahasznosítani és a méret automatikusan számít

Layout:

Az elrendezés nagyon egyszerű és sok lehetőséggel rendelkezik. A elrendezést saját HTML szerkezetnek kell lennie. Nézd meg a példát. Az alábbi példa csak a elrendezési meta-adatokat írja le.

• A size {Number/String} tartalmaznia lehet egy panel magasságát/szélességét a panel típusának megfelelően.A 120 szám meghatározza a pixeleket, és a String 100% százalékot határozhat meg.
• A minsize {Number/String} a panel minimális mérete, miközben a panel visszahúzódik (például: size érték)
• A maxsize {Number/String} a panel maximális mérete, miközben a panel visszahúzódik (elsődleges: automatikusan számított)
• A resize {Boolean} lehetővé teszi a panel újraindítását, kivéve a main panelt (automatikusan számít)
• A show {Boolean} lehetővé teszi a láthatóságot (default: 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%' }
		}
	}
}

Jó tudni:

• FONTOS: Ez az összetevőnek tartalmaznia kell a <script type="text/plain"></script>-ben rögzített elrendezés metaadatát
• Minden panel section elem, és tartalmaznia kell a data-type="top" attribútumot a panel típusával
• Csak azokat a paneleket határozza meg, amelyeket használni fog
• Az összes section elem megrendelése nem fontos
• A top2 használja a top konfigurációs kulcsot
• A right2 használja a right konfigurációs kulcsot
• A bottom2 használja a bottom konfigurációs kulcsot

Használja a <ui-component name="layout">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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