# j-Section

> j-Section: udržuje pevnou výšku procenta; skvělé použití pro intranetové aplikace

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

- udržuje pevnou úroveň
- Výborná aplikace pro intranet
- Podporuje `releasing`

__Konfigurace__:

- `height {Number}` - procento výšky
- `parent {String}` Volitelně, kontejner s pevnou výškou, může být `window`Podmínkou hodnoty: `parent` a prvků.
- Minimální výška `minheight {Number}` v pixelů (předběžné: `0` - onemocnění)
- `scroll {Boolean}` umožňuje vertikální přepínání (přesněji řečeno: `false` - onemocnění)
- `scrollbar {Boolean}` zobrazuje scrollbar (předvolené: `false`)
- `delay {Number}` `msec.` znovu přejde do krabice, pokud se hodnota mění podle trasy (předběžně: `100`)
- `visibleY {Boolean}` Stále ukazuje `Y` Skládací bar (default) `false`)
- `visibleX {Boolean}` Stále ukazuje `X` Skládací bar (default) `false`)
- `scrolltop {Boolean}` se automaticky otáčí na vrchol, pokud je změněn `path` (předvolený: `false`)
- `margin {Number}` volitelné, vrchní / dolní marže spolu (podporuje `auto` který je počítán z `offset.top`, výchozí: `0`)
- `marginxs {Number}` volitelné, horní / dolní hranice spolu pro šířku obrazovky `xs`
- `marginsm` volitelné, horní / dolní hranice spolu pro šířku obrazovky `sm`
- `marginmd` volitelné, horní / dolní hranice spolu pro šířku obrazovky `md`
- `marginlg` volitelné, horní / dolní hranice spolu pro šířku obrazovky `lg`
- `invisible {Boolean}`, pokud je `true` pak sekce nastavuje třídu `invisible` při renderování (předvolené: `true`)
- `autofocus {Boolean/String}` může soustředit vstup. `String` === `jQuery selector` pro vstup
- `back {String}` titul pro zadní tlačítko (předvolené: `Back`)
- `delayanim {Number}` animace zpoždění (předvolené: `100`)
- `scrollbarshadow {Boolean}` přidává stín pro scrollbars (předvolené: `false`)
- `backexec {String}` odkaz na tlačítko `function(parent)`, které zachytí zpět (nemůže zabránit standardnímu chování)

__Metody__:

- `component.scrolltop(val)` Sklíčení Y
- `component.scrollbottom(val)` se otáčí z dolní strany
- `component.resize()` rezuje kontejner (reaguje automaticky na události `resize`)
- `component.resizescrollbar()` se přizpůsobí přepínání (cvičení pro speciální případy)
- __NEW__: `component.import(url)` dováží novou sekci z adresy URL, odpověď musí být ve formě `<section data-if="...."`
- __NEW__: `component.import(html)` dováží novou sekci z HTML ve formátu `<section data-if="...."`
- __NEW__: `component.import(element)` dováží novou sekci ze surového prvku `SECTION`
- __NEW__: `component.cancel([id])` dynamicky odstraňuje sekci

__Definice__:

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

__Sekce atributů__:

- `data-if` musí obsahovat podmínku pro zobrazení
- `data-parent` Může obsahovat rodiče `data-if`
- `data-title` obsahuje štítek / název pro část
- `data-reload` může obsahovat odkaz na `function(el)` (volitelné)
- `data-id` obsahuje vlastněný identifikátor pro nahrazení všech `~ID~` výrazů v obsahu (volitelné)
- `data-url` může obsahovat odkaz na šablónu (volitelně)

__Dobré vědět__:

- Chcete-li přidat další obsah do hlavy na pravé straně, stačí přidat uvnitř složky např. `<div>BUTTON</div>`.
- Můžete dynamicky vložit / odstranit sekce prostřednictvím metody `component.import()` nebo `component.cancel()`.
- Všechny atributy sekce mohou být dynamicky změněny (např. `data-title`, `data-parent`, atd.).
- Všechny fráze `~PATH~` budou nahrazeny hodnotou atributu `data-if`
- Všechny fráze `~ID~` budou nahrazeny hodnotou atributu `data-if`
- `SET('path', 'if', 'right')` bude animovat obsah na pravou stranu

Použijte ji s `<ui-component name="section">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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