# j-Section

> j-Section: maintient une hauteur de pourcentage fixe; grande utilisation pour les applications intranet

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

- Il maintient un taux fixe
- Excellente utilisation pour les applications intranet
- Soutenir le `releasing`

__Configuration__ :

- `height {Number}` pourcentage de hauteur
- `parent {String}` en option, un conteneur à hauteur fixe, peut être `window`. Valeur par défaut : élément `parent`.
- `minheight {Number}` une hauteur minimale en pixels (defaut: `0` - désactivé)
- `scroll {Boolean}` permet le scrollage vertical (defaut: `false` - désactivé)
- `scrollbar {Boolean}` montre la barre d'échantillonnage (defaut : `false`)
- `delay {Number}` `msec.` reprend la boîte si la valeur est modifiée selon le chemin (defaut: `100`)
- `visibleY {Boolean}` Toujours montrer `Y` Le scrollbar (defaut) : `false`)
- `visibleX {Boolean}` Toujours montrer `X` Le scrollbar (defaut) : `false`)
- `scrolltop {Boolean}` défile automatiquement vers le haut si le `path` est modifié (par défaut : `false`)
- `margin {Number}` facultatif, une marge de haut/bas ensemble (supportant `auto` qui est compté à partir de `offset.top`, par défaut: `0`)
- `marginxs {Number}` en option, une marge supérieure/inférieure ensemble pour la largeur d'écran `xs`
- `marginsm` en option, une marge supérieure/inférieure ensemble pour la largeur d'écran `sm`
- `marginmd` en option, une marge supérieure/inférieure ensemble pour la largeur d'écran `md`
- `marginlg` en option, une marge supérieure/inférieure ensemble pour la largeur d'écran `lg`
- `invisible {Boolean}` si `true` alors la section établit la classe `invisible` lors de la rendu (défaut: `true`)
- `autofocus {Boolean/String}` peut focaliser une entrée. `String` === `jQuery selector` pour l'entrée
- `back {String}` un titre pour le bouton arrière (defaut: `Back`)
- Délai d'animation `delayanim {Number}` (par défaut : `100`)
- `scrollbarshadow {Boolean}` ajoute une ombre pour les scrollbars (defaut: `false`)
- `backexec {String}` un lien vers le `function(parent)` qui capte le bouton de retour (il empêche le comportement standard)

__Méthodes__ :

- `component.scrolltop(val)` défile Y
- `component.scrollbottom(val)` fait défiler Y depuis le côté inférieur
- `component.resize()` redimensionne le conteneur (il réagit automatiquement aux événements `resize`)
- `component.resizescrollbar()` résise la barre de scroll personnalisée (dirigée pour les cas spéciaux)
- __NEW__: `component.import(url)` importe une nouvelle section de l'URL, la réponse doit être dans le formulaire `<section data-if="...."`
- __NEW__: `component.import(html)` importe une nouvelle section de l'HTML dans le formulaire `<section data-if="...."`
- __NEW__: `component.import(element)` importe une nouvelle section de l'élément `SECTION`
- __NEW__: `component.cancel([id])` supprime la section dynamiquement

__Définition__:

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

__Les attributs de la section__:

- Le `data-if` doit contenir une condition d'affichage
- `data-parent` peut contenir un parent `data-if`
- `data-title` contient un étiquette/titre pour la section
- `data-reload` peut contenir un lien vers le `function(el)` (optional)
- `data-id` contient un identifiant personnalisé pour remplacer toutes les phrases `~ID~` dans le contenu (optional)
- `data-url` peut contenir un lien vers le modèle (optionnel)

__Bon à savoir__ :

- Si vous voulez ajouter un contenu supplémentaire dans le titre à droite, appuyez simplement à l'intérieur du composant par exemple `<div>BUTTON</div>`.
- Vous pouvez intégrer/retourner les sections en fonction des méthodes `component.import()` ou `component.cancel()`.
- Toutes les attributs de la section peuvent être modifiés dynamiquement (par exemple, `data-title`, `data-parent`, etc.).
- Toutes les phrases `~PATH~` seront remplacées par la valeur attribuée `data-if`
- Toutes les phrases `~ID~` seront remplacées par la valeur attribuée `data-if`
- `SET('path', 'if', 'right')` va animer le contenu à droite

Utilisez-le avec `<ui-component name="section">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>
```