# j-Layout

> Die Erstellung des Layouts ist sehr einfach und bietet viele Möglichkeiten. Das Layout muss eine eigene HTML-Struktur haben. Schauen Sie sich das Beispiel an. Das folgende Beispiel beschreibt nur Metadaten des Layouts.

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

- Diese Komponente kann ein Layout für Ihr SPA erstellen. Diese Komponente ist etwas schwieriger zu verstehen, aber sehr hilfreich. `j-Layout` verwendet jComponent `+v17`.

__Konfiguration__:

- `parent {String}` kann `parent`, `window` oder jQuery-Selektor für die `closest`-Methode enthalten (Standard: `window`)
- `margin {Number}` fügt Marge für `height` hinzu (Standard: `0`)
- `remember {Boolean}` kann sich die letzten Einstellungen des Layouts zur Größenänderung merken (Standard: `true`)
- `space {Number}` intern, enthält einen Abstand zwischen den Panels (Standard: `1`)
- `border {Number}` intern, enthält eine Rahmengröße (Standard: `0`)
- `resize {String}` intern, ein Pfad zur Methode, die ausgeführt wird, wenn die Größe des Layouts geändert wird
- `autoresize {Boolean}` aktiviert die automatische Größenänderung (Standard: `true`)

__Methoden__:

- `component.refresh()` aktualisiert das Layout
- `component.resize()` führt eine Größenänderung durch
- `component.reset()` führt ein Zurücksetzen der Größenänderung durch
- `component.layout(name)` ändert ein Layout (z. B. bidirektionale Datenbindung)
- `component.rebind(code_string)` erstellt eine neue Layoutkonfiguration
- `component.lock(type, [boolean])` sperrt das Panel

__Panel-Typen__:

- `left` linkes Feld, veränderbar
- `right` rechtes Feld, größenverstellbar
- Das rechte Panel `right2` befindet sich neben dem linken Panel und verwendet den Schlüssel `right` in der Konfiguration, dessen Größe geändert werden kann
- `top` oberes Panel, größenverstellbar (das Panel liegt über allen Panels)
- `top2`-Oberseite, in der Größe veränderbar und verwendet den `top`-Schlüssel in der Konfiguration (er liegt zwischen `left` und `right`-Bedienfeld)
- `bottom` unteres Panel, größenverstellbar (es ist das Panel an der Unterseite aller Panels)
- `bottom2` unteres Panel, veränderbar in der Größe und verwendet den `bottom`-Schlüssel in der Konfiguration (er liegt zwischen `left` und `right` Panel)
- `main`-Hauptfenster, __kann nicht in der Größe geändert werden__ und die Größe wird automatisch gezählt

__Layout__:

Die Erstellung des Layouts ist sehr einfach und bietet viele Möglichkeiten. Das Layout muss eine eigene HTML-Struktur haben. Schauen Sie sich das Beispiel an. Das folgende Beispiel beschreibt nur Metadaten des Layouts.

- `size {Number/String}` kann je nach Paneeltyp eine Höhe/Breite des Paneels enthalten. Die Zahl `120` definiert Pixel und die Zeichenfolge `100%` kann den Prozentsatz definieren
- `minsize {Number/String}` ist eine minimale Größe des Panels, während die Größe des Panels geändert wird (Standard: `size`-Wert)
- `maxsize {Number/String}` ist eine maximale Größe des Panels, während die Größe des Panels geändert wird (Standard: automatisch gezählt)
- `resize {Boolean}` ermöglicht die Größenänderung des Panels mit Ausnahme des Panels `main` (es wird automatisch gezählt).
- `show {Boolean}` ermöglicht Sichtbarkeit (Standard: `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%' }
		}
	}
}
```

__Gut zu wissen__:

- __WICHTIG__: Diese Komponente muss Metadaten des in `<script type="text/plain"></script>` eingeschlossenen Layouts enthalten
- Jedes Panel ist ein `section`-Element und muss das Attribut `data-type="top"` mit dem Paneltyp enthalten
- Definieren Sie nur die Panels, die Sie verwenden möchten
- Die Reihenfolge aller `section`-Elemente ist nicht wichtig
- `top2` verwendet den Konfigurationsschlüssel `top`
- `right2` verwendet den Konfigurationsschlüssel `right`
- `bottom2` verwendet den Konfigurationsschlüssel `bottom`

Verwenden Sie es mit `<ui-component name="layout">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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