# j-Section

> j-Section: mantiene una percentuale fissa; ottimo uso per le applicazioni intranet

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

- mantenere un percentuale fisso
- Ottimo utilizzo per le applicazioni intranet
- Supporto di `releasing`

__Configurazione__:

- `height {Number}` per cento di altezza
- `parent {String}` opzionale, un contenitore con altezza fissa, può essere `window`Valore di default: `parent` Il elemento.
- `minheight {Number}` a altezza minima in pixel (default: `0` - disabilitato)
- `scroll {Boolean}` consente scorrimento verticale (default: `false` - disabilitato)
- `scrollbar {Boolean}` mostra scrollbar (default: `false`)
- `delay {Number}` `msec.` riprende la scatola se il valore è cambiato in base al percorso (default: `100`)
- `visibleY {Boolean}` mostra ancora la barra di scorrimento `Y` (default: `false`)
- `visibleX {Boolean}` mostra ancora la barra di scorrimento `X` (default: `false`)
- `scrolltop {Boolean}` scorre automaticamente in cima se il `path` è modificato (default: `false`)
- `margin {Number}` opzionale, una margina superiore/bottom insieme (sopporti `auto` che è calcolato da `offset.top`, predefinito: `0`)
- `marginxs {Number}` opzionale, una margina superiore / inferiore insieme per la larghezza dello schermo `xs`
- `marginsm` opzionale, una margina superiore / inferiore insieme per la larghezza dello schermo `sm`
- `marginmd` opzionale, una margina superiore / inferiore insieme per la larghezza dello schermo `md`
- `marginlg` opzionale, una margina superiore / inferiore insieme per la larghezza dello schermo `lg`
- `invisible {Boolean}` se `true` quindi la sezione stabilisce la classe `invisible` quando si renderà (default: `true`)
- `autofocus {Boolean/String}` può concentrare un input. `String` === `jQuery selector` per l'ingresso
- `back {String}` un titolo per il pulsante posteriore (default: `Back`)
- Il ritardo di animazione `delayanim {Number}` (default: `100`)
- `scrollbarshadow {Boolean}` aggiunge ombra per scrollbars (default: `false`)
- `backexec {String}` un collegamento al pulsante di ritorno `function(parent)` (è impedito il comportamento standard)

__Metodi__:

- `component.scrolltop(val)` scorrere e
- `component.scrollbottom(val)` scorrere Y dal basso
- Il contenitore `component.resize()` risiste (reagisce automaticamente agli eventi `resize`)
- `component.resizescrollbar()` rifiuta la barra di scorrimento personalizzata (obiettivo per casi speciali)
- __NEW__: `component.import(url)` importa una nuova sezione dall'URL, la risposta deve essere nel modulo `<section data-if="...."`
- __NEW__: `component.import(html)` importa una nuova sezione dal HTML nel modulo `<section data-if="...."`
- __NEW__: `component.import(element)` importa una nuova sezione dall'elemento `SECTION`
- __NEW__: `component.cancel([id])` rimuove la sezione in modo dinamico

__Definizione__:

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

__Attributi di sezione__:

- `data-if` deve contenere una condizione per la visualizzazione
- `data-parent` può contenere un parente `data-if`
- `data-title` contiene un'etichetta/titolo per la sezione
- `data-reload` può contenere un collegamento al `function(el)` (opzionale)
- `data-id` contiene un identificatore personalizzato per sostituire tutte le frasi `~ID~` nel contenuto (opzionale)
- `data-url` può contenere un link al modello (opzionale)

__Buono sapere__:

- Se si desidera aggiungere un contenuto aggiuntivo al titolo a destra, basta appendere all'interno del componente, ad esempio `<div>BUTTON</div>`.
- È possibile inserire/rimuovere dinamicamente le sezioni tramite i metodi `component.import()` o `component.cancel()`.
- Tutti gli attributi della sezione possono essere modificati in modo dinamico (ad esempio `data-title`, `data-parent`, ecc.).
- tutte le frasi `~PATH~` saranno sostituite per il valore di attribuzione `data-if`
- tutte le frasi `~ID~` saranno sostituite per il valore di attribuzione `data-if`
- `SET('path', 'if', 'right')` animerà il contenuto sul lato destro

Utilizzare con `<ui-component name="section">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>
```