# j-Parts

> Detta innehåll kan hantera flera delar som lagras i Array och fokusera på en viss del. Det simulerar något som webbläsarkiv.

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

Detta innehåll kan hantera flera `parts` som lagras i `Array` och fokusera på en viss del. Det simulerar något som webbläsarkiv.


__Konfigurera__:

- Föregående `parent {String}` på grund av delstorlek (default: `auto`)
- `margin {Number}` vertikal marginal (default: `0`)
- `create {String}` en länk till `function(part)`, det körs om delen är skapad (kallar en gång)
- `focus {String}` en länk till `function(part)`, det körs om delen är fokuserad
- `close {String}` en länk till `function(part)`, det körs om delen är stängd

__Bra att veta 1__:

- Alla `~PATH~`-fraser ersätts automatiskt med `item.path`
- Alla `~ID~`-fraser ersätts automatiskt med `item.id`

__föremål specifikation__:

- `item.id {String}` mycket viktig, delidentifierare
- `item.blur {String/Function(el, item)}` är valfritt, en länk till `function(element, item)` om delen fokuseras ut
- `item.focus {String/Function(el, item)}` eller `item.reload {String}` valfritt, en länk till `function(element, item)` om den är fokuserad
- `item.remove {String/Function(el, item)}` är valfritt, en länk till `function(element, item)` om delen tas bort
- `item.html {String}` en HTML-innehåll eller användning av `item.url`
- `item.import {String}` URL för innehållet
- `item.path {String}` alternativ, det ersätter alla `~PATH~` fraser automatiskt
- `item.delay {Number}` en försening för avlägsnande av `invisible` klass
- __NEW__ `item.attrd {Object}` lägger till `data-key` attribut i objektet

__Utökad av komponenten__:

- `item.focused {Boolean}` bestämmer om delen är fokuserad eller inte
- `item.element {jQuery}` delar

__Metoder__:

- `component.close(id)` stängs
- `component.focus(id)` fokuserar på
- `component.rename(id, name, [icon])` återställs

Använd den med `<ui-component name="parts">`När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i `DEF.fallback` (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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