# j-Parts

> Ce contenu peut gérer plusieurs parties stockées dans l'Array et se concentrer sur une partie spécifique.

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

Ce contenu peut gérer plusieurs `parts` stockés dans le `Array` et se concentrer sur une partie spécifique.


__Configuration__ :

- `parent {String}` en raison de la taille partielle (defaut: `auto`)
- `margin {Number}` marge verticale (defaut : `0`)
- `create {String}` un lien vers le `function(part)`, il est exécuté si la partie est créée (appelé une fois)
- `focus {String}` un lien vers le `function(part)`, il est exécuté si la partie est focalisée
- `close {String}` un lien vers le `function(part)`, il est exécuté si la partie est fermée

__Bon à savoir 1__ :

- toutes les phrases `~PATH~` seront automatiquement remplacées par `item.path`
- toutes les phrases `~ID~` seront automatiquement remplacées par `item.id`

__spécification de l'élément__:

- `item.id {String}` très important, partie identifiant
- `item.blur {String/Function(el, item)}` optionnel, un lien vers le `function(element, item)` si la partie est focalisée
- `item.focus {String/Function(el, item)}` ou `item.reload {String}` optionnel, un lien vers le `function(element, item)` si la partie est focalisée
- `item.remove {String/Function(el, item)}` optionnel, un lien vers le `function(element, item)` si la partie est supprimée
- `item.html {String}` un contenu HTML ou utilisez `item.url`
- `item.import {String}` URL pour le contenu
- `item.path {String}` optionnel, il remplace toutes les phrases `~PATH~` automatiquement
- `item.delay {Number}` retard pour la suppression de la classe `invisible`
- __NEW__ `item.attrd {Object}` ajoute des attributs `data-key` dans l'élément

__Extension par le composant__:

- `item.focused {Boolean}` détermine si la partie est focalisée ou non
- `item.element {jQuery}` Un élément

__Méthodes__ :

- `component.close(id)` Fermer la partie
- Le `component.focus(id)` se concentre sur
- `component.rename(id, name, [icon])` renommée

Utilisez-le avec `<ui-component name="parts">`. 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
<ui-component name="exec">

	<ui-bind path="myparts" config="template" class="block">
		<script type="text/html">
			{{ foreach m in value }}
			<button class="exec" data-exec="changepart" data-id="{{ m.id }}"><i class="ti ti-times exec mr5" data-prevent="true" data-exec="closepart"></i>{{ m.name }}</button>
			{{ end }}
		</script>
	</ui-bind>
	<br />

	<div style="width:600px;height:300px;border:1px solid #E0E0E0">
		<ui-component name="parts" path="myparts" config="parent:auto"></ui-component>
	</div>

</ui-component>

<script>
	var myparts = [];

	myparts.push({ id: '1', name: 'Part 1', html: '<div class="padding">Part 1</div>' });
	myparts.push({ id: '2', name: 'Part 2', html: '<div class="padding">Part 2</div>' });
	myparts.push({ id: '3', name: 'Part 3', html: '<div class="padding">Part 3</div>' });

	function changepart(el ,e) {
		var id = ATTRD(el);
		SETTER('parts/focus', id);
	}

	function closepart(el, e) {
		var id = ATTRD(el);
		SETTER('parts/close', id);
	}

</script>
```