# j-Layout

> Tworzenie układu jest bardzo proste i z wieloma możliwościami. układ musi mieć własną strukturę HTML. Spójrz na przykład.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pl
Content-SHA256: 6d307ea30543a2032ace606439559647be68a77a45c12fb526bea89c383369e7
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Ten składnik może stworzyć rozkład dla SPA. ten składnik jest nieco trudniejszy do zrozumienia, ale jest bardzo przydatny. `j-Layout` wykorzystuje jComponent `+v17`.

__Konfiguracja__:

- `parent {String}` może zawierać wybór `parent`, `window` lub jQuery dla metody `closest` (default: `window`)
- `margin {Number}` dodaje marżę dla `height` (default: `0`)
- `remember {Boolean}` może zapamiętać ostatnie ustawienia rozmiaru do ponownego odtwarzania (default: `true`)
- `space {Number}` wewnętrzny, zawiera przestrzeń między paneli (default: `1`)
- `border {Number}` wewnętrzny, zawiera rozmiar graniczny (default: `0`)
- `resize {String}` wewnętrzny, ścieżka do metody, którą wykonuje się, gdy rozkład jest ponownie zmodyfikowany
- `autoresize {Boolean}` umożliwia automatyczne rozmiary (default: `true`)

__Metody__:

- `component.refresh()` rozcieńczenie
- `component.resize()` wyświetla się
- `component.reset()` wykonuje ponowne ustawienie
- `component.layout(name)` zmienia ustawienie (jak dwa sposoby wiążące dane)
- `component.rebind(code_string)` tworzy nową konfigurację
- `component.lock(type, [boolean])` zamyka panele

__Rodzaje paneli__:

- `left` Lewy panel, odtworzony
- `right` prawicowy panel, odtworzony
- Panel `right2` znajduje się obok lewego panelu i używa klucza `right` w konfiguracji, odtwarzającej
- Panel `top` górny, odświeżający (Panel jest na górze wszystkich paneli)
- Panel `top2`, odtwarzalny i używa klucza `top` w konfiguracji (jest między panelem `left` a `right`)
- `bottom` panel dolny, odtwarzalny (Panel jest na dole wszystkich paneli)
- Panel `bottom2`, odtwarzalny i używa klucza `bottom` w konfiguracji (jest między panelem `left` a `right`)
- Panel główny `main`, nie może być odtworzony, a rozmiar jest automatycznie obliczany

__Layout__:

Tworzenie układu jest bardzo proste i z wieloma możliwościami. układ musi mieć własną strukturę HTML. Spójrz na przykład.

- `size {Number/String}` może zawierać wysokość / szerokość panelu zgodnie z typem panelu. numer `120` definiuje piksele, a strumień `100%` może określić procent
- `minsize {Number/String}` to minimalny rozmiar panelu, podczas gdy panel jest odświeżony (default: wartość `size`)
- `maxsize {Number/String}` to maksymalny rozmiar panelu, podczas gdy panele są odtwarzane (default: automatycznie obliczone)
- `resize {Boolean}` umożliwia odtwarzanie panelu z wyjątkiem panelu `main`.
- `show {Boolean}` umożliwia widoczność (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%' }
		}
	}
}
```

__Dobrze wiedzieć__:

- __WYWIADOMOŚĆ: Ten element musi zawierać metadane rozmiaru wtyczonego w `<script type="text/plain"></script>`
- Każdy panel jest elementem `section` i musi zawierać atrybut `data-type="top"` z typem panelu
- Określ panele, które będziesz używać
- Zamówienie wszystkich elementów `section` nie ma znaczenia
- `top2` używa klucza konfiguracyjnego `top`
- `right2` używa klucza konfiguracyjnego `right`
- `bottom2` używa klucza konfiguracyjnego `bottom`

Użyj go z `<ui-component name="layout">`Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

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