# j-Layout2

> Die Erstellung des Layouts ist sehr einfach.

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

- Diese Komponente ist ein sehr einfacher Bestandteil im Vergleich zu `j-Layout`.


__Konfiguration__:

- `parent` {String} kann einen `parent`, `window` oder jQuery-Selektor für die `closest`-Methode enthalten (Default: `window`)
- `margin` {Nummer} fügt Margin für die `height` hinzu (Default: `0`)
- `autoresize` {Boolean} ermöglicht Auto-Rezize (Default: `true`)

__Methoden__:

- `component.show(type)` kann ein bestimmtes Panel für mobile Geräte anzeigen, `type` kann `left`, `right` oder `main` sein
- `component.resizescrollbar(panel_type)` resisiert eine Scrollbar für ein bestimmtes Panel
- `component.scrolltop(panel_type)`-Scrolls zum Spitzen für ein bestimmtes Panel

__Panel-Typen__:

- `left` links
- `right` rechte Panel
- `top` Top-Panel (es ist das Panel auf allen Panels)
- `top2` Top Panel und verwendet `top` Schlüssel in der Konfiguration (es ist zwischen `left` und `right` Panel)
- `bottom` unteren Panel (es ist das Panel am Unteren aller Panels)
- `bottom2` unteren Panel und verwendet `bottom` Schlüssel in der Konfiguration (es ist zwischen `left` und `right` Panel)
- `main` Hauptverhältnisse

__Layout__:

Die Erstellung des Layouts ist sehr einfach.

```html
<div data-type="" data-size="" data-scrollbar=""></div>
```

__Attribute__:

- `data-type` muss eine Art von Sektion `top`, `top2`, `left`, `right`, `bottom`, `bottom2` oder `main` enthalten
- `data-size` enthält eine Größe des Abschnitts `LG,MD,SM,XS` --> in Pixeln oder Prozentsatz, zum Beispiel: `200,200,200,0` (`0` bedeutet versteckt) oder `20%` (alle Werte werden `20%`)
- `data-scrollbar="margin:50;visible:1"` ermöglicht Scrollbar, mögliche Werte:
	- `selector` {String} optionale jQuery-Selektor für den Scrollbar-Kontinent
	- `margin` {Nummer} Scrollbar Marge (Default: `0`)
	- `visible` {Boolean} zeigt die Scrollbar

__Gut zu wissen__:

- 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

Verwenden Sie es mit `<ui-component name="layout2">`. 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
<ui-component name="layout2" config="parent:window" class="invisible">
	<div data-type="top" data-size="44" style="background-color:red">
		TOP
	</div>
	<div data-type="bottom2" data-size="44" style="background-color:blue">
		BOTTOM
	</div>
	<div data-type="left" data-size="20%,20%,20%,0" style="background-color:green">
		LEFT
	</div>
	<div data-type="right" data-size="20%,20%,20%,0" style="background-color:purple">
		RIGHT
	</div>
	<div data-type="main" data-scrollbar="visible:true" style="background-color:#F0F0F0">
	</div>
</ui-component>
```