# j-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.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: hu
Content-SHA256: 4f4ca1d2fa73f3567d671e10cc50c8f9a42b17efbe7851598a3f23129bef2114
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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

```js
{
	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.

```html example.html
<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>
```