# j-Section

> j-Section: utrzymuje stałą wysokość procentową; świetne zastosowanie do aplikacji intranetowych

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

- Utrzymuje stałą wysokość procentową
- Doskonałe zastosowanie do aplikacji intranetowych
- Wsparcie `releasing`

__Konfiguracja__:

- `height {Number}` - odsetek wysokości
- `parent {String}` Opcjonalnie, pojemnik o stałej wysokości może być `window`Podstawowe wartości: `parent` elementy .
- `minheight {Number}` minimalna wysokość w pikselach (default: `0` - nie jest dostępny)
- `scroll {Boolean}` umożliwia pionowe skręcanie (default: `false` - nie jest włączony)
- `scrollbar {Boolean}` wyświetla pasek skręcania (default: `false`)
- `delay {Number}` `msec.` odtwarza pudełko ponownie, jeśli wartość jest zmieniona zgodnie z ścieżką (default: `100`)
- `visibleY {Boolean}` wciąż wyświetla pasek skręcania `Y` (default: `false`)
- `visibleX {Boolean}` wciąż wyświetla pasek skręcania `X` (default: `false`)
- `scrolltop {Boolean}` przechodzi automatycznie do góry, jeśli `path` jest zmieniony (default: `false`)
- `margin {Number}` opcjonalny, górna / dolna marża razem (podporuje `auto` licząc od `offset.top`, domyślnie: `0`)
- `marginxs {Number}` opcjonalny, górna / dolna margina razem dla szerokości ekranu `xs`
- `marginsm` opcjonalny, górna / dolna margina razem dla szerokości ekranu `sm`
- `marginmd` opcjonalny, górna / dolna margina razem dla szerokości ekranu `md`
- `marginlg` opcjonalny, górna / dolna margina razem dla szerokości ekranu `lg`
- `invisible {Boolean}` jeśli `true` to sekcja ustanawia klasę `invisible` podczas renderowania (default: `true`)
- `autofocus {Boolean/String}` może skupić się na wejściu. `String` === `jQuery selector` dla wejścia
- `back {String}` tytuł dla przycisku z tyłu (default: `Back`)
- Opóźnienie w animacji `delayanim {Number}` (default: `100`)
- `scrollbarshadow {Boolean}` dodaje ciemność do scrollbars (default: `false`)
- `backexec {String}` link do `function(parent)` który złapać przycisk z powrotem (zabronione jest standardowe zachowanie)

__Metody__:

- `component.scrolltop(val)` skrócenie i
- `component.scrollbottom(val)` skręca Y z dolnej strony
- `component.resize()` rezygnuje z kontenera (reaguje automatycznie na wydarzenia `resize`)
- `component.resizescrollbar()` odtwarza pasek skręcania (dotyczy specjalnych przypadków)
- __NEW__: `component.import(url)` importuje nową sekcję z adresu URL, odpowiedź musi być w formularzu `<section data-if="...."`
- __NEW__: `component.import(html)` importuje nową sekcję z HTML w formularzu `<section data-if="...."`
- __NEW__: `component.import(element)` importuje nową sekcję z elementu surowego `SECTION`
- __NEW__: `component.cancel([id])` dynamicznie usuwa sekcję

__Definicja__:

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

__Sekcja atrybutów__:

- `data-if` musi zawierać warunek wyświetlania
- `data-parent` może zawierać rodzic `data-if`
- `data-title` zawiera etykietę/tytuł dla sekcji
- `data-reload` może zawierać link do `function(el)` (opcjonalnie)
- `data-id` zawiera indywidualny identyfikator do zastąpienia wszystkich fraz `~ID~` w treści (opcjonalnie)
- `data-url` może zawierać link do szablonu (opcjonalnie)

__Dobrze wiedzieć__:

- Jeśli chcesz dodać dodatkową zawartość do nagłówka po prawej stronie, po prostu włącz wewnątrz elementu np. `<div>BUTTON</div>`.
- Możesz dynamicznie wstawić / usunąć sekcje za pomocą metod `component.import()` lub `component.cancel()`.
- Wszystkie atrybuty sekcji można zmienić dynamicznie (np. `data-title`, `data-parent`, itp.).
- Wszystkie frazy `~PATH~` zostaną zastąpione przez wartość atrybutową `data-if`
- Wszystkie frazy `~ID~` zostaną zastąpione przez wartość atrybutową `data-if`
- `SET('path', 'if', 'right')` będzie animować treść po prawej stronie

Użyj go z `<ui-component name="section">`Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

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