# j-Section

> j-Section: поддържа фиксирана височина на процента; отлична употреба за интранет приложения

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

- Осигурява фиксирана височина на процентите
- Изключително полезни за интранет приложения
- Поддръжка на `releasing`

__Конфигуриране__:

- `height {Number}` Процент на височината
- `parent {String}` Избор на контейнер с фиксирана височина може да бъде `window`Дефинирана стойност: `parent` Елементът
- `minheight {Number}` минимална височина в пиксели (дефолт: `0` - деактивиран)
- `scroll {Boolean}` позволява вертикално скалиране (дефолт: `false` - деактивиран)
- `scrollbar {Boolean}` показва скалбар (дефолт: `false`)
- `delay {Number}` `msec.` рецизира кутията отново, ако стойността се променя в съответствие с маршрута (предварително: `100`)
- `visibleY {Boolean}` все още показва `Y` скалбар (дефолт: `false`)
- `visibleX {Boolean}` все още показва `X` скалбар (дефолт: `false`)
- `scrolltop {Boolean}` се върти автоматично до върха, ако `path` е променян (предварително: `false`)
- `margin {Number}` опционално, горната / долната маржа заедно (поддръжка на `auto` която се брои от `offset.top`, дефолт: `0`)
- `marginxs {Number}` опция, горна/долна маржа заедно за ширина на екрана `xs`
- `marginsm` опция, горна/долна маржа заедно за ширина на екрана `sm`
- `marginmd` опция, горна/долна маржа заедно за ширина на екрана `md`
- `marginlg` опция, горна/долна маржа заедно за ширина на екрана `lg`
- `invisible {Boolean}` ако `true` тогава секцията поставя класа на `invisible` когато се представя (предварително: `true`)
- `autofocus {Boolean/String}` може да се фокусира върху входа. `String` === `jQuery selector` за входа
- `back {String}` заглавие за бутона обратно (предварително: `Back`)
- `delayanim {Number}` Анимация закъснение (дефолт: `100`)
- `scrollbarshadow {Boolean}` добавя сянка за скалбарки (предварително: `false`)
- `backexec {String}` е връзката към `function(parent)`, която улавя бутона назад (това предотвратява стандартното поведение)

__Методи__:

- `component.scrolltop(val)` Скриншоти и
- `component.scrollbottom(val)` Скръгли Y от долната страна
- `component.resize()` резиз контейнер (то реагира автоматично на `resize` събития)
- `component.resizescrollbar()` резиз персонализирано скалбар (целенасочено за специални случаи)
- __NEW__: `component.import(url)` внася нова секция от URL адреса, отговорът трябва да бъде във формата на `<section data-if="...."`
- __NEW__: `component.import(html)` внася нова секция от HTML във формата на `<section data-if="...."`
- __NEW__: `component.import(element)` внася нова секция от суров елемент `SECTION`
- __NEW__: `component.cancel([id])` премахва секцията динамично

__Дефиниция__:

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

__Атрибути на секцията__:

- `data-if` трябва да съдържа условие за показване
- `data-parent` може да съдържа родител `data-if`
- `data-title` съдържа етикет/заглавие за секцията
- `data-reload` може да съдържа връзка към `function(el)` (опционално)
- `data-id` съдържа персонализиран идентификатор за замяна на всички фрази на `~ID~` в съдържанието (опционално)
- `data-url` може да съдържа връзка към шаблона (опционално)

__Добре е да се знае__:

- Ако искате да добавите допълнително съдържание в заглавието на дясната страна, просто прикрепете вътре в компонента например `<div>BUTTON</div>`.
- Можете динамично да вмъкнете/изтриете секции чрез `component.import()` или `component.cancel()` методи.
- Всички атрибути на секцията могат да се променят динамично (например `data-title`, `data-parent`, и т.н.).
- Всички фрази на `~PATH~` ще бъдат заменени с стойността на атрибута на `data-if`
- Всички фрази на `~ID~` ще бъдат заменени с стойността на атрибута на `data-if`
- `SET('path', 'if', 'right')` ще анимира съдържанието на дясната страна

Използвайте го с `<ui-component name="section">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>
```