# j-Section

> j-Section: behoudt een vast percentage hoogte; geweldige gebruik voor intranet-toepassingen

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

- Houd een vaste percentage
- Goed gebruik voor intranet applicaties
- Ondersteunt `releasing`

__Configuratie__:

- `height {Number}` een percentage hoogte
- `parent {String}` Een container met een vaste hoogte kan `window`De standaardwaarde: `parent` Het element.
- `minheight {Number}` een minimale hoogte in pixels (default: `0` - ingeschakeld)
- `scroll {Boolean}` maakt verticale scrolling mogelijk (default: `false` - ingeschakeld)
- `scrollbar {Boolean}` toont scrollbar (default: `false`)
- `delay {Number}` `msec.` resecteert de doos opnieuw als de waarde wordt gewijzigd volgens de route (default: `100`)
- `visibleY {Boolean}` toont nog steeds de `Y` scrollbar (default: `false`)
- `visibleX {Boolean}` toont nog steeds de `X` scrollbar (default: `false`)
- De `scrolltop {Boolean}` scrollt automatisch naar de top als de `path` is gewijzigd (default: `false`)
- `margin {Number}` optioneel, een top/bottom marge samen (de ondersteuning van `auto` dat is geteld vanaf `offset.top`, standaard: `0`)
- `marginxs {Number}` optioneel, een top/bottom margin samen voor `xs` scherm breedte
- `marginsm` optioneel, een top/bottom margin samen voor `sm` scherm breedte
- `marginmd` optioneel, een top/bottom margin samen voor `md` scherm breedte
- `marginlg` optioneel, een top/bottom margin samen voor `lg` scherm breedte
- `invisible {Boolean}` als `true` dan de sectie bepaalt de `invisible` klasse wanneer het wordt gepresenteerd (default: `true`)
- `autofocus {Boolean/String}` kan een input richten. `String` === `jQuery selector` voor de input
- `back {String}` een titel voor de back button (default: `Back`)
- `delayanim {Number}` animatie vertraging (default: `100`)
- `scrollbarshadow {Boolean}` voegt schaduw toe aan scrollbars (default: `false`)
- `backexec {String}` een link naar de `function(parent)` die de terugknop opneemt (het voorkomt standaard gedrag)

__Methoden__:

- `component.scrolltop(val)` scrolls en
- `component.scrollbottom(val)` scrolls Y van de onderkant
- `component.resize()` reageert op de container (het reageerde automatisch op de gebeurtenissen van `resize`)
- `component.resizescrollbar()` resiseren aangepaste scrollbar (gericht op speciale gevallen)
- __NEW__: `component.import(url)` importeert een nieuw gedeelte van de URL, het antwoord moet in het formulier `<section data-if="...."` zijn
- __NEW__: `component.import(html)` importeert een nieuw gedeelte van de HTML in het formulier `<section data-if="...."`
- __NEW__: `component.import(element)` importeert een nieuwe sectie van het grondstofelement `SECTION`
- __NEW__: `component.cancel([id])` verwijdert de sectie dynamisch

__Definitie__:

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

__Sectie Attributen__:

- `data-if` moet een voorwaarde bevatten om te tonen
- `data-parent` kan een parent `data-if` bevatten
- `data-title` bevat een etiket/titel voor de sectie
- `data-reload` kan een link bevatten naar de `function(el)` (optional)
- `data-id` een aangepaste identificator voor het vervangen van alle `~ID~` In de inhoud (optional)
- `data-url` kan een link bevatten naar de template (optional)

__Goed om te weten__:

- Als u een extra inhoud wilt toevoegen aan de header aan de rechterkant, voeg dan gewoon binnen van het onderdeel bijvoorbeeld `<div>BUTTON</div>` toe.
- U kunt secties dynamisch inschrijven/verwijzen via de `component.import()` of `component.cancel()` methoden.
- Alle attributen van de sectie kunnen dynamisch worden gewijzigd (bijvoorbeeld `data-title`, `data-parent`, enz.).
- Alle `~PATH~`-afdrukken worden vervangen door de `data-if`-attributwaarde.
- Alle `~ID~`-afdrukken worden vervangen door de `data-if`-attributwaarde.
- `SET('path', 'if', 'right')` geeft de inhoud aan de rechterkant

Gebruik het met `<ui-component name="section">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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