# j-Section

> j-Section: állandó százalékos magasságot tart; nagyszerű használat az intranet alkalmazásokhoz

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

- Állandó százalékos magasságban
- Nagy használat az intranet alkalmazásokhoz
- Támogatja a `releasing`

__konfiguráció__:

- `height {Number}` - a magasság százalékos
- `parent {String}` egy tartály, amely rögzített magassággal rendelkezik, lehet `window`Az alapértelmezett érték: `parent` Az elem.
- `minheight {Number}` a minimális magasság pixelekben (default: `0` - eltérő)
- `scroll {Boolean}` lehetővé teszi a függőleges forgatást (default: `false` - kikapcsolva)
- `scrollbar {Boolean}` mutatja a scrollbar (default: `false`)
- A `delay {Number}` `msec.` ismét visszavonja a dobozot, ha az érték az útvonal szerint megváltozik (elsődleges: `100`)
- `visibleY {Boolean}` még mindig mutatja a `Y` scrollbar (default: `false`)
- `visibleX {Boolean}` még mindig mutatja a `X` scrollbar (default: `false`)
- A `scrolltop {Boolean}` automatikusan felfelé forog, ha a `path` változik (default: `false`)
- `margin {Number}` opcionális, egy felső/alatti margin együtt (a támogatás `auto` amely számítva a `offset.top`, alapértelmezett: `0`)
- `marginxs {Number}` opcionális, egy felső/alatti margin együtt a `xs` képernyő szélessége
- `marginsm` opcionális, egy felső/alatti margin együtt a `sm` képernyő szélessége
- `marginmd` opcionális, egy felső/alatti margin együtt a `md` képernyő szélessége
- `marginlg` opcionális, egy felső/alatti margin együtt a `lg` képernyő szélessége
- `invisible {Boolean}` ha a `true` akkor a szakasz állítsa be a `invisible` osztályot, amikor a renderelés (default: `true`)
- A `autofocus {Boolean/String}` egy bevitelt fókuszálhat. `String` === `jQuery selector` a beviteli
- `back {String}` a hátsó gomb címét (default: `Back`)
- `delayanim {Number}` animációs késés (default: `100`)
- A `scrollbarshadow {Boolean}` árnyékot ad a scrollbarshoz (default: `false`)
- `backexec {String}` egy link a `function(parent)` amely rögzíti a vissza gombot (megakadályozza a szabványos viselkedés)

__módszerek__:

- `component.scrolltop(val)` forgatás és
- A `component.scrollbottom(val)` az alsó oldalról
- `component.resize()` újrahasznosítja a tartályt (a `resize` eseményekre automatikusan reagál)
- `component.resizescrollbar()` szűkített csík (különleges esetekre tervezték)
- __NEW__: A `component.import(url)` új részeket importál az URL-ről, a válasznak a `<section data-if="...."` formátumban kell lennie
- __NEW__: A `component.import(html)` új HTML-szekciót importál a `<section data-if="...."` formátumban
- __NEW__: a `component.import(element)` új részét importálja a nyers `SECTION` elemből
- __NEW__: `component.cancel([id])` eltávolítja a szekciót dinamikusan

__Meghatározás__:

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

__A rész tulajdonságai__:

- A `data-if` tartalmazza a megjelenítés feltételeit
- A `data-parent` tartalmazhat egy szülő `data-if`
- `data-title` tartalmazza a címke/címke a részhez
- A `data-reload` tartalmazhat egy linket a `function(el)` (opcionális)
- A `data-id` tartalmaz egy személyre szabott azonosítót, amely helyettesíti az összes `~ID~` mondatot a tartalomban (opcionális)
- A `data-url` tartalmazhat egy linket a sablonra (opcionális)

__Jó tudni__:

- Ha a jobb oldalon egy további tartalmat szeretne hozzáadni a címkéhez, csak a komponens belsejében kell hozzáadnia például a `<div>BUTTON</div>`-et.
- A `component.import()` vagy a `component.cancel()` módszerek segítségével dinamikusan beállíthatja / törölheti a szakaszokat.
- Az összes rész tulajdonságait dinamikusan meg lehet változtatni (például `data-title`, `data-parent`, stb.).
- Az összes `~PATH~` kifejezés helyébe a `data-if` attribútum értéke kerül.
- Az összes `~ID~` kifejezés helyébe a `data-if` attribútum értéke kerül.
- A `SET('path', 'if', 'right')` a tartalmat a jobb oldalra animálja

Használja a `<ui-component name="section">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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