# j-Section

> j-Section: håller en fast procentsats höjd; bra användning för intranet-applikationer

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

- Håller en fast procentsats
- Bra användning för intranet-applikationer
- Stöd för `releasing`

__Konfigurera__:

- `height {Number}` en procentsats av höjd
- `parent {String}` Alternativt, en behållare med fast höjd kan vara `window`Förfalskad värde: `parent` Element är.
- `minheight {Number}` en minimal höjd i pixlar (default: `0` - inaktiverad)
- `scroll {Boolean}` möjliggör vertikal snurrning (default: `false` - inaktiverad)
- `scrollbar {Boolean}` visar scrollbar (default: `false`)
- `delay {Number}` `msec.` återställer rutan om värdet ändras enligt vägen (default: `100`)
- `visibleY {Boolean}` visar fortfarande `Y` scrollbar (default: `false`)
- `visibleX {Boolean}` visar fortfarande `X` scrollbar (default: `false`)
- `scrolltop {Boolean}` snurrar automatiskt till toppen om `path` ändras (default: `false`)
- `margin {Number}` valfritt, en topp/bottom marginal tillsammans (stödjer `auto` som räknas från `offset.top`, standard: `0`)
- `marginxs {Number}` valfritt, en topp/bottom marginal tillsammans för `xs` skärmbredd
- `marginsm` valfritt, en topp/bottom marginal tillsammans för `sm` skärmbredd
- `marginmd` valfritt, en topp/bottom marginal tillsammans för `md` skärmbredd
- `marginlg` valfritt, en topp/bottom marginal tillsammans för `lg` skärmbredd
- `invisible {Boolean}` om `true` sedan avsnittet sätter `invisible` klass när det är rendering (default: `true`)
- `autofocus {Boolean/String}` kan fokusera en inmatning. `String` === `jQuery selector` för inmatningen
- `back {String}` en rubrik för bakknappen (default: `Back`)
- `delayanim {Number}` animation försening (default: `100`)
- `scrollbarshadow {Boolean}` lägger till skugga för scrollbars (default: `false`)
- `backexec {String}` en länk till `function(parent)` som fångar tillbaka knappen (det förhindrar standard beteende)

__Metoder__:

- `component.scrolltop(val)` skruvar och
- `component.scrollbottom(val)` skruvar Y från botten
- `component.resize()` residerar behållaren (det reagerar automatiskt på `resize` händelser)
- `component.resizescrollbar()` återställer anpassad skruvbar (målad för speciella fall)
- __NEW__: `component.import(url)` importerar en ny sektion från URL-adressen, svaret måste vara i formuläret `<section data-if="...."`
- __NEW__: `component.import(html)` importerar en ny sektion från HTML i formuläret `<section data-if="...."`
- __NEW__: `component.import(element)` importerar en ny sektion från råelementet `SECTION`
- __NEW__: `component.cancel([id])` tar bort sektionen dynamiskt

__definitioner__:

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

__Avsnitt attribut__:

- `data-if` måste innehålla ett villkor för visning
- `data-parent` kan innehålla en parent `data-if`
- `data-title` innehåller en etikett/titel för avsnittet
- `data-reload` kan innehålla en länk till `function(el)` (alternativ)
- `data-id` innehåller en anpassad identifierare för att ersätta alla `~ID~` fraser i innehållet (alternativt)
- `data-url` kan innehålla en länk till mall (alternativt)

__Bra att veta__:

- Om du vill lägga till ytterligare innehåll i rubriken till höger, bara bifoga inuti komponenten t.ex. `<div>BUTTON</div>`.
- Du kan dynamiskt ange/lägsna sektioner via `component.import()` eller `component.cancel()` metoder.
- Alla egenskaper i avsnittet kan ändras dynamiskt (t.ex. `data-title`, `data-parent`, etc.).
- Alla `~PATH~`-fraser ersätts med attributvärdet `data-if`
- Alla `~ID~`-fraser ersätts med attributvärdet `data-if`
- `SET('path', 'if', 'right')` animerar innehållet till höger sida

Använd den med `<ui-component name="section">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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