# j-Section

> j-Section: păstrează un procent fix; mare utilizare pentru aplicații intranet

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

- menține o înălțime fixă a procentului
- Utilizare excelentă pentru aplicații intranet
- Suport pentru `releasing`

__Configurarea__:

- `height {Number}` - un procent de înălțime
- `parent {String}` opțional, un container cu înălțime fixă poate fi `window`Valoarea deficitară: `parent` elementului .
- `minheight {Number}` o înălțime minimă în pixeli (default: `0` - disabilitate)
- `scroll {Boolean}` permite rularea verticala (default: `false` - disabilitate)
- `scrollbar {Boolean}` arată scrollbar (default: `false`)
- `delay {Number}` `msec.` reîncărcă caseta dacă valoarea este schimbată în funcție de cale (default: `100`)
- `visibleY {Boolean}` Întotdeauna arată `Y` Scrollbar (defaultă pentru: `false`)
- `visibleX {Boolean}` Întotdeauna arată `X` Scrollbar (defaultă pentru: `false`)
- `scrolltop {Boolean}` se întoarce automat la vârf dacă `path` este modificat (default: `false`)
- `margin {Number}` opțional, o marjă superioară / inferioară împreună (suporturi `auto` care este calculată de la `offset.top`, standard: `0`)
- `marginxs {Number}` opțional, o marjă superioară / inferioară împreună pentru lățimea ecranului `xs`
- `marginsm` opțional, o marjă superioară / inferioară împreună pentru lățimea ecranului `sm`
- `marginmd` opțional, o marjă superioară / inferioară împreună pentru lățimea ecranului `md`
- `marginlg` opțional, o marjă superioară / inferioară împreună pentru lățimea ecranului `lg`
- `invisible {Boolean}` dacă `true` apoi secțiunea stabilește clasa `invisible` atunci când este rendering (default: `true`)
- `autofocus {Boolean/String}` poate concentra o intrare. `String` === `jQuery selector` pentru intrarea
- `back {String}` un titlu pentru butonul din spate (default: `Back`)
- Încălcarea de animație `delayanim {Number}` (default: `100`)
- `scrollbarshadow {Boolean}` adaugă umbra pentru scrollbars (default: `false`)
- `backexec {String}` este un link la `function(parent)` care captează butonul de întoarcere (acesta împiedică comportamentul standard)

__Metode__:

- `component.scrolltop(val)` scrolluri și
- `component.scrollbottom(val)` scrolls Y din partea inferioară
- `component.resize()` rezizează containerul (reacționează automat la evenimentele `resize`)
- `component.resizescrollbar()` resizează scrollbarul personalizat (adică pentru cazuri speciale)
- __NEW__: `component.import(url)` importă o nouă secțiune din adresa URL, răspunsul trebuie să fie în formularul `<section data-if="...."`
- __NEW__: `component.import(html)` importă o nouă secțiune din HTML în formularul `<section data-if="...."`
- __NEW__: `component.import(element)` importează o nouă secțiune din elementul brut `SECTION`
- __NEW__: `component.cancel([id])` îndepărtează în mod dinamic secțiunea

__Definiţie__:

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

__Atributele secțiunii__:

- `data-if` trebuie să conțină o condiție de afișare
- `data-parent` poate conține un părinte `data-if`
- `data-title` conține o etichetă/titlu pentru secțiunea
- `data-reload` poate conține un link la `function(el)` (opțional)
- `data-id` conține un identificator personalizat pentru a înlocui toate frazele `~ID~` din conținut (opțional)
- `data-url` poate conține un link la șablonul (opțional)

__bine să știi__:

- Dacă doriți să adăugați un conținut suplimentar în titlul de pe partea dreaptă, pur și simplu adăugă în interiorul componentei, de exemplu `<div>BUTTON</div>`.
- Puteți introduce / elimina în mod dinamic secțiunile prin metode `component.import()` sau `component.cancel()`.
- Toate atributele secțiunii pot fi modificate în mod dinamic (de exemplu, `data-title`, `data-parent`, etc.).
- Toate frazele `~PATH~` vor fi înlocuite cu valoarea atributiei `data-if`
- Toate frazele `~ID~` vor fi înlocuite cu valoarea atributiei `data-if`
- `SET('path', 'if', 'right')` va anima conținutul pe partea dreaptă

Utilizați-l cu `<ui-component name="section">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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