# j-Section

> j-Section: behält eine feste prozentuale Höhe bei; Tolle Verwendung für Intranet-Anwendungen

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

- behält eine feste prozentuale Höhe bei
- Hervorragende Verwendung für Intranet-Anwendungen
- unterstützt `releasing`

__Konfiguration__:

- `height {Number}` ein Prozentsatz der Höhe
- `parent {String}` optional, ein Behälter mit fester Höhe, kann `window` sein. Standardwert: `parent`-Element.
- `minheight {Number}` eine minimale Höhe in Pixel (Standard: `0` – deaktiviert)
- `scroll {Boolean}` ermöglicht vertikales Scrollen (Standard: `false` – deaktiviert)
- `scrollbar {Boolean}` zeigt Bildlaufleiste an (Standard: `false`)
- `delay {Number}` `msec.` ändert die Größe der Box erneut, wenn der Wert entsprechend dem Pfad geändert wird (Standard: `100`)
- `visibleY {Boolean}` zeigt weiterhin die Bildlaufleiste `Y` an (Standard: `false`)
- `visibleX {Boolean}` zeigt weiterhin die Bildlaufleiste `X` an (Standard: `false`)
- `scrolltop {Boolean}` scrollt automatisch nach oben, wenn `path` geändert wird (Standard: `false`)
- `margin {Number}` optional, ein oberer/unterer Rand zusammen (unterstützt `auto`, das ab `offset.top` gezählt wird, Standard: `0`)
- `marginxs {Number}` optional, ein oberer/unterer Rand zusammen für `xs` Bildschirmbreite
- `marginsm` optional, ein oberer/unterer Rand zusammen für `sm` Bildschirmbreite
- `marginmd` optional, ein oberer/unterer Rand zusammen für `md` Bildschirmbreite
- `marginlg` optional, ein oberer/unterer Rand zusammen für `lg` Bildschirmbreite
- `invisible {Boolean}`, wenn `true`, dann legt der Abschnitt beim Rendern die Klasse `invisible` fest (Standard: `true`)
- `autofocus {Boolean/String}` kann eine Eingabe fokussieren. `String` === `jQuery selector` für die Eingabe
- `back {String}` ein Titel für die Zurück-Schaltfläche (Standard: `Back`)
- `delayanim {Number}` Animationsverzögerung (Standard: `100`)
- `scrollbarshadow {Boolean}` fügt Schatten für Bildlaufleisten hinzu (Standard: `false`)
- `backexec {String}` ein Link zum `function(parent)`, der die Zurück-Schaltfläche erfasst (verhindert Standardverhalten)

__Methoden__:

- `component.scrolltop(val)` scrollt Y
- `component.scrollbottom(val)` scrollt Y von unten
- `component.resize()` ändert die Größe des Containers (er reagiert automatisch auf `resize`-Ereignisse)
- `component.resizescrollbar()` ändert die Größe der benutzerdefinierten Bildlaufleiste (für Sonderfälle gedacht)
- __NEW__: `component.import(url)` importiert einen neuen Abschnitt aus der URL-Adresse, die Antwort muss in der Form `<section data-if="...."` erfolgen
- __NEW__: `component.import(html)` importiert einen neuen Abschnitt aus dem HTML in der Form `<section data-if="...."`
- __NEW__: `component.import(element)` importiert einen neuen Abschnitt aus dem Rohelement `SECTION`
- __NEU__: `component.cancel([id])` entfernt den Abschnitt dynamisch

__Definition__:

```html
<ui-component name="section" path="path">

	<!-- path must have same value as "data-if" attribute -->
	<section data-if="1" data-title="A title">

	</section>

	<!-- path must have same value as "data-if" attribute -->
	<!-- "data-parent" enables Back button in the header and after click the component sets value from "data-parent" attribute -->
	<section data-if="2" data-parent="1" data-title="A title">

	</section>

	<!-- GOOD TO KNOW: Dynamic compilation -->
	<section data-if="3" data-parent="2" data-title="A title" data-back="link_to_function">

		<!-- SCRIPT or TEMPLATE -->
		<script type="text/html">
			Will be compiled and rendered when the section will be displayed
		</script>

	</section>

	<!-- Template from URL address -->
	<section data-if="4" data-parent="2" data-title="A title" data-url="LINK_TO_HTML_TEMPLATE"></section>

</ui-component>
```

__Abschnittsattribute__:

- `data-if` muss eine Bedingung für die Anzeige enthalten
- `data-parent` kann einen übergeordneten `data-if` enthalten
- `data-title` enthält eine Bezeichnung/Titel für den Abschnitt
- `data-reload` kann einen Link zum `function(el)` enthalten (optional)
- `data-id` enthält eine benutzerdefinierte Kennung zum Ersetzen aller `~ID~`-Phrasen im Inhalt (optional)
- `data-url` kann einen Link zur Vorlage enthalten (optional)

__Gut zu wissen__:

- Wenn Sie der Kopfzeile auf der rechten Seite zusätzlichen Inhalt hinzufügen möchten, hängen Sie ihn einfach innerhalb der Komponente an, z. B. `<div>BUTTON</div>`.
- Sie können Abschnitte über die Methoden `component.import()` oder `component.cancel()` dynamisch einfügen/entfernen.
- Alle Abschnittsattribute können dynamisch geändert werden (z. B. `data-title`, `data-parent` usw.).
- Alle `~PATH~`-Phrasen werden durch den Attributwert `data-if` ersetzt
- Alle `~ID~`-Phrasen werden durch den Attributwert `data-if` ersetzt
- `SET('path', 'if', 'right')` animiert den Inhalt auf der rechten Seite

Verwenden Sie es mit `<ui-component name="section">`. 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>
	body { padding: 0; margin: 0; overflow: hidden; }
</style>

<ui-component name="section" path="common.section" config="parent:window;scrollbar:1" default="''">

	<section class="hidden invisible" data-if="1" data-title="Section 1">
		<div class="padding">
			<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
				<div>SECTION 1</div>
				<div class="exec link" data-exec="showsection2">Show section 2</div>
			</div>
		</div>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2">
		<script type="text/html">
			<div class="padding">
				<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
					SECTION 2
				</div>
			</div>
		</script>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2" data-url="LINK_TO_TEMPLATE"></section>
</ui-component>

<script>

	function showsection2() {
		SET('common.section', '2');
	}

	setTimeout(showsection2, 1000);

</script>
```